第1页 / 共8页
第2页 / 共8页
第3页 / 共8页
第4页 / 共8页
第5页 / 共8页
第6页 / 共8页
第7页 / 共8页
第8页 / 共8页
vue.js+Element实现表格里的增删改查.pdf
vue.js+Element实现表格里的增删改查
实现表格里的增删改查
本篇文章主要介绍了vue.js+Element实现增删改查，具有一定的参考价值，有兴趣的可以了解一下。
新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element （http://element.eleme.io/#/zh-CN）来配合vue.js进行样
式填充
之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js
下面就介绍一下vue.js应用在表格里的增删改查
首先引入一下element的js
然后引入需要用到的vue相关的js文件
下面先说一下html文件
删除
编辑
-
添加用户 删除 停用 激活
{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}
layout="total, sizes, prev, pager, next, jumper"
:total="total_rows"
@size-change="pageSizeChange"
@current-change="pageCurrentChange">
这一段是element的表单以及编辑还有分页样式 可以直接复制进来 其中添加了一些click操作 后面需要用到，然后我们就开始
引入js
了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则 定义一些变量
在methods进行我们的操作
vm = new Vue({
el: '#user',
data:{},
methods:{}
})
首先 我们先从读取数据开始
放入你的url
users是表格绑定的数组 也是存放从后台获取的数据
将需要显示的数据放在filter中
vm = new Vue({
el: '#user',
// 数据模型
data: function() {
return {
url: 'url',
users: [],
filter: {
per_page: 10, // 页大小
page: 1, // 当前页
name:'',
username:'',
phone:'',
is_active:'',
sorts:''
},
total_rows: 0,
loading: true,
};
},
methods:{}
})
接下来我们添加methods
pageSizeChange() 以及 pageCurrentChange()是用于分页的函数
在query() 是用于搜索的项目
getUsers() 就是用于获取数据
methods: {
pageSizeChange(val) {
this.filter.per_page = val;
this.getUsers();
},
pageCurrentChange(val) {
this.filter.page = val;
this.getUsers();
},
query(){
this.filter.name='';
this.filter.username='';
this.filter.phone='';
this.filter[this.select]=this.keywords;
this.getUsers();
},
// 获取用户列表
getUsers() {
this.loading = true;
var resource = this.$resource(this.url);
resource.query(this.filter)
.then((response) => {
this.users = response.data.datas;
this.total_rows = response.data.total_rows;
this.loading = false;
})
.catch((response)=> {
this.$message.error('错了哦，这是一条错误消息');
this.loading = false;
});
},
}
读取完数据之后 我们可以看见数据是按照每页十条显示 是上面我们默认设置的
下面进行删除操作 删除我设置的是单挑删除以及多条删除
因为删除需要选中 所以我们需要加入选中的变量
vm = new Vue({
el: '#user',
// 数据模型
data: function() {
return {
url: 'http://172.10.0.201/api/v1/accounts',
users: [
],
filter: {
per_page: 10, // 页大小
page: 1, // 当前页
name:'',
username:'',
phone:'',
is_active:'',
sorts:''
},
total_rows: 0,
loading: true,
selected: [], //已选择项
};
},
然后在methods也要加入选中的函数
tableSelectionChange(val) {
console.log(val);
this.selected = val;
},
// 删除单个用户
removeUser(user) {
this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' })
.then(() => { // 向请求服务端删除
var resource = this.$resource(this.url + "{/id}");
resource.delete({ id: user.id })
.then((response) => {
this.$message.success('成功删除了用户' + user.username + '!'); this.getUsers(); })
.catch((response) => {
this.$message.error('删除失败!');
});
}) .catch(() => {
this.$message.info('已取消操作!');
});
},
//删除多个用户
removeUsers() {
this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' })
.then(() => {
console.log(this.selected);
var ids = []; //提取选中项的id
$.each(this.selected,(i, user)=> { ids.push(user.id); }); // 向请求服务端删除var resource = this.$resource(this.url);
resource.remove({ids: ids.join(",")
}) .then((response) => {
.catch((response) => {
this.$message.error('删除失败!');
});
})
.catch(() => {
});
}
接下来就进行到编辑和添加
由于删除和编辑需要加入表单
因为有表单 所以我们需要加入表单验证
以及添加和编辑弹出的状态
vm = new Vue({
el: '#user',
// 数据模型
data: function() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.create.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
url: 'http://172.10.0.201/api/v1/accounts',
users: [
],
create: {
id: '',
username: '',
name: '',
password: '',
checkpass: '',
phone: '',
email: '',
is_active: true
},
currentId:'',
update:{
name: '',
phone: '',
email: '',
is_active: true
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 3, max: 15, message: '长度在 3 到 15 个字符'}
],
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 25, message: '长度在 3 到 25 个字符'},
{ pattern:/^[A-Za-z0-9]+$/, message: '用户名只能为字母和数字'}
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 25, message: '长度在 6 到 25 个字符'}
],
checkpass: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: validatePass}
],
email: [
{ type: 'email', message: '邮箱格式不正确'}
],
phone:[
{ pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
]
},
updateRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 3, max: 15, message: '长度在 3 到 15 个字符'}
],
email: [
{ type: 'email', message: '邮箱格式不正确'}
],
phone:[
{ pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
]
},
filter: {
per_page: 10, // 页大小
page: 1, // 当前页
name:'',
username:'',
phone:'',
is_active:'',
sorts:''
},
total_rows: 0,
loading: true,
selected: [], //已选择项
dialogCreateVisible: false, //创建对话框的显示状态
dialogUpdateVisible: false, //编辑对话框的显示状态
createLoading: false,
updateLoading: false,
};
},
下面就加入添加和编辑的函数
methods: {
tableSelectionChange(val) {
console.log(val);
this.selected = val;
},
pageSizeChange(val) {
console.log(`每页 ${val} 条`);
this.filter.per_page = val;
this.getUsers();
},
pageCurrentChange(val) {
console.log(`当前页: ${val}`);
this.filter.page = val;
this.getUsers();
},
setCurrent(user){
this.currentId=user.id;
this.update.name=user.name;
this.update.phone=user.phone;
this.update.email=user.email;
this.update.is_active=user.is_active;
this.dialogUpdateVisible=true;
},
// 重置表单
reset() {
this.$refs.create.resetFields();
},
query(){
this.filter.name='';
this.filter.username='';
this.filter.phone='';
this.filter[this.select]=this.keywords;
this.getUsers();
},
// 获取用户列表
getUsers() {
this.loading = true;
var resource = this.$resource(this.url);
resource.query(this.filter)
.then((response) => {
this.users = response.data.datas;
this.total_rows = response.data.total_rows;
this.loading = false;
})
.catch((response)=> {
this.$message.error('错了哦，这是一条错误消息');
this.loading = false;
});
},
// 创建用户
createUser() {
// 主动校验
this.$refs.create.validate((valid) => {
if (valid) {
this.create.id=getuuid();
this.createLoading=true;
var resource = this.$resource(this.url);
resource.save(this.create)
.then((response) => {
this.$message.success('创建用户成功！');
this.dialogCreateVisible=false;
this.createLoading=false;
this.reset();
this.getUsers();
})
.catch((response) => {
var data=response.data;
if(data instanceof Array){
this.$message.error(data[0]["message"]);
}
else if(data instanceof Object){
this.$message.error(data["message"]);
}
this.createLoading=false;
});
}
else {
//this.$message.error('存在输入校验错误!');
return false;
}
});
},
// 更新用户资料
updateUser() {
this.$refs.update.validate((valid) => {
if (valid) {
this.updateLoading=true;
var actions = {
update: {method: 'patch'}
}
var resource = this.$resource(this.url,{},actions);
resource.update({"ids":this.currentId},this.update)
.then((response) => {
this.$message.success('修改用户资料成功！');
this.dialogUpdateVisible=false;
this.updateLoading=false;
//this.reset();
this.getUsers();
})
.catch((response) => {
var data=response.data;
console.log(data);
if(data instanceof Array){
this.$message.error(data[0]["message"]);
}
else if(data instanceof Object){
this.$message.error(data["message"]);
}
this.updateLoading=false;
});
}
else {
//this.$message.error('存在输入校验错误!');
return false;
}
});
},
// 删除单个用户
removeUser(user) {
this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' })
.then(() => {
// 向请求服务端删除
var resource = this.$resource(this.url + "{/id}");
resource.delete({ id: user.id })
.then((response) => {
this.$message.success('成功删除了用户' + user.username + '!');
this.getUsers();
})
.catch((response) => {
this.$message.error('删除失败!');
});
})
.catch(() => {
this.$message.info('已取消操作!');
});
},
//删除多个用户
removeUsers() {
this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' })
.then(() => {
console.log(this.selected);
var ids = [];
//提取选中项的id
$.each(this.selected,(i, user)=> {
ids.push(user.id);
});
// 向请求服务端删除
var resource = this.$resource(this.url);
resource.remove({ids: ids.join(",") })
.then((response) => {
this.$message.success('删除了' + this.selected.length + '个用户!');
this.getUsers();
})
.catch((response) => {
this.$message.error('删除失败!');
});
})
.catch(() => {
this.$Message('已取消操作!');
});
}
}
这就是整个增删改查的过程
demo地址：http://xiazai.jb51.net/201701/yuanma/vuejs-element_jb51.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
