vue.js+Element如何实现表格里的增删改查

这篇文章主要介绍了vue.js+Element如何实现表格里的增删改查，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

长安网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。成都创新互联从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

新项目使用的是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')}}
 
 
 删除
 编辑

这一段是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('已取消操作!'); }); } }

大橙子网站建设，新征程启航

vue.js+Element如何实现表格里的增删改查

其他资讯