devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue.js+ element 增删改查

作者：羊村懒王 | 2024-06-02 08:26:07

赞

踩

vue.js+ element 增删改查

文章出处：http://blog.csdn.net/janessssss/article/details/53288073?locationNum=14&fps=1

新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element （http://element.eleme.io/#/zh-CN）来配合vue.js进行样式填充 
之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 
下面就介绍一下vue.js应用在表格里的增删改查 
首先引入一下element的css以及js

  1. <link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css">
  2. <script src="plugins/element-ui/index.js"></script>

 
 
  • 1
  • 2

然后引入需要用到的vue相关的js文件

  1. <script src="plugins/vue/vue.js"></script>
  2. <script src="plugins/vue/vue-resource.js"></script>
  3. <script src="plugins/vue/vue-moment.min.js"></script>
  4. <script src="js/jquery.min.js"></script>

 
 
  • 1
  • 2
  • 3
  • 4

下面先说一下html文件

  1. <div id="user">
  2.     <!-- 操作 -->
  3.     <ul class="btn-edit fr">
  4.         <li >
  5.             <el-button type="primary" @click="dialogCreateVisible = true">添加用户</el-button>
  6.             <el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()"  >删除</el-button>
  7.             <el-button type="primary" icon="edit" :disabled="selected.length==0" >停用</el-button>
  8.             <el-button type="primary" icon="edit" :disabled="selected.length==0" >激活</el-button>
  9.         </li>
  10.     </ul>
  11.     <!-- 用户列表-->
  12.     <el-table :data="users"
  13.               stripe
  14.               v-loading="loading"
  15.               element-loading-text="拼命加载中..."
  16.               style="width: 100%"
  17.               height="443"
  18.               @sort-change="tableSortChange"
  19.               @selection-change="tableSelectionChange">
  20.         <el-table-column type="selection"
  21.                          width="60">
  22.         </el-table-column>
  23.         <el-table-column sortable="custom" prop="username"
  24.                          label="用户名"
  25.                          width="120">
  26.         </el-table-column>
  27.         <el-table-column prop="name"
  28.                          label="姓名"
  29.                          width="120">
  30.         </el-table-column>
  31.         <el-table-column prop="phone"
  32.                          label="手机"
  33.                          >
  34.         </el-table-column>
  35.         <el-table-column prop="email"
  36.                          label="邮箱">
  37.         </el-table-column>
  38.         <el-table-column prop="create_time" sortable="custom" inline-template
  39.                          label="注册日期"
  40.                          width="260">
  41.             <div>{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}</div>
  42.         </el-table-column>
  43.         <el-table-column inline-template
  44.                          label="操作"
  45.                          width="250">
  46.             <span>
  47.                 <el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button>
  48.                 <el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button>
  49.             </span>
  50.         </el-table-column>
  51.     </el-table>
  52.     <!--分页begin-->
  53.     <el-pagination class="tc mg"
  54.                    :current-page="filter.page"
  55.                    :page-sizes="[10, 20, 50, 100]"
  56.                    :page-size="filter.per_page"
  57.                    layout="total, sizes, prev, pager, next, jumper"
  58.                    :total="total_rows"
  59.                    @size-change="pageSizeChange"
  60.                    @current-change="pageCurrentChange">
  61.     </el-pagination>
  62.     <!--分页end-->
  63. </div>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

这一段是element的表单以及编辑还有分页样式 可以直接复制进来 其中添加了一些click操作 后面需要用到 
然后我们就开始引入js

了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则 定义一些变量 
在methods进行我们的操作

  1.     vm = new Vue({
  2.         el: '#user',
  3.             data:{},
  4.             methods:{}
  5.     })

 
 
  • 1
  • 2
  • 3
  • 4
  • 5

首先 我们先从读取数据开始 
放入你的url 
users是表格绑定的数组 也是存放从后台获取的数据 
将需要显示的数据放在filter中

  1. vm = new Vue({
  2.    el: '#user',
  3.     // 数据模型
  4.     data: function() {
  5.         return {
  6.             url: 'url',
  7.             users: [],
  8.             filter: {
  9.                 per_page: 10, // 页大小
  10.                 page: 1, // 当前页
  11.                 name:'',
  12.                 username:'',
  13.                 phone:'',
  14.                 is_active:'',
  15.                 sorts:''
  16.             },
  17.             total_rows: 0,
  18.             loading: true,
  19.         };
  20.     },
  21.     methods:{}
  22. })

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

接下来我们添加methods 
pageSizeChange() 以及 pageCurrentChange()是用于分页的函数 
在query() 是用于搜索的项目 
getUsers() 就是用于获取数据

  1.  methods: {
  2.         pageSizeChange(val) {
  3.             this.filter.per_page = val;
  4.             this.getUsers();
  5.         },
  6.         pageCurrentChange(val) {
  7.             this.filter.page = val;
  8.             this.getUsers();
  9.         },
  10.         query(){
  11.             this.filter.name='';
  12.             this.filter.username='';
  13.             this.filter.phone='';
  14.             this.filter[this.select]=this.keywords;
  15.             this.getUsers();
  16.         },
  17.         // 获取用户列表
  18.         getUsers() {
  19.             this.loading = true;
  20.  
  21.             var resource = this.$resource(this.url);
  22.             resource.query(this.filter)
  23.                 .then((response) => {
  24.                     this.users = response.data.datas;
  25.                     this.total_rows = response.data.total_rows;
  26.                     this.loading = false;
  27.                 })
  28.                 .catch((response)=> {
  29.                     this.$message.error('错了哦，这是一条错误消息');
  30.                     this.loading = false;
  31.                 });
  32.  
  33.         },
  34.     }

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

读取完数据之后 我们可以看见数据是按照每页十条显示 是上面我们默认设置的 
下面进行删除操作 删除我设置的是单挑删除以及多条删除 
因为删除需要选中 所以我们需要加入选中的变量

  1. vm = new Vue({
  2.    el: '#user',
  3.     // 数据模型
  4.     data: function() {
  5.  
  6.         return {
  7.             url: 'http://172.10.0.201/api/v1/accounts',
  8.             users: [
  9.             ],
  10.             filter: {
  11.                 per_page: 10, // 页大小
  12.                 page: 1, // 当前页
  13.                 name:'',
  14.                 username:'',
  15.                 phone:'',
  16.                 is_active:'',
  17.                 sorts:''
  18.             },
  19.             total_rows: 0,
  20.             loading: true,
  21.             selected: [], //已选择项
  22.         };
  23.     },

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

然后在methods也要加入选中的函数

  1.     tableSelectionChange(val) {
  2.             console.log(val);
  3.             this.selected = val;
  4.         },

 
 
  • 1
  • 2
  • 3
  • 4

// 删除单个用户

  1.  removeUser(user) {
  2.      this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' }) 
  3.          .then(() => { // 向请求服务端删除 
  4.              var resource = this.$resource(this.url + "{/id}"); 
  5.              resource.delete({ id: user.id }) 
  6.                  .then((response) => { 
  7.                     this.$message.success('成功删除了用户' + user.username + '!');    this.getUsers(); }) 
  8.                  .catch((response) => { 
  9.                      this.$message.error('删除失败!'); 
  10.             }); 
  11.         }) .catch(() => { 
  12.             this.$message.info('已取消操作!');
  13.      }); 
  14. }, 
  15. //删除多个用户 
  16. removeUsers() { 
  17.     this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' }) 
  18.         .then(() => { 
  19.             console.log(this.selected); 
  20.             var ids = []; //提取选中项的id 
  21.             $.each(this.selected,(i, user)=> { ids.push(user.id); }); // 向请求服务端删除var resource = this.$resource(this.url);
  22.              resource.remove({ids: ids.join(",") 
  23.             }) .then((response) => { 
  24.             .catch((response) => { 
  25.                 this.$message.error('删除失败!'); 
  26.             }); 
  27.         }) 
  28.         .catch(() => { 
  29.     }); 
  30. }

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

接下来就进行到编辑和添加 
由于删除和编辑需要加入表单

  1. <!-- 创建用户 begin-->
  2.     <el-dialog title="创建用户" v-model="dialogCreateVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="reset" >
  3.         <el-form id="#create" :model="create" :rules="rules" ref="create" label-width="100px">
  4.             <el-form-item label="用户名" prop="username">
  5.                 <el-input v-model="create.username"></el-input>
  6.             </el-form-item>
  7.             <el-form-item label="姓名" prop="name">
  8.                 <el-input v-model="create.name"></el-input>
  9.             </el-form-item>
  10.             <el-form-item label="密码" prop="password">
  11.                 <el-input v-model="create.password" type="password" auto-complete="off"></el-input>
  12.             </el-form-item>
  13.             <el-form-item label="确认密码" prop="checkpass">
  14.                 <el-input v-model="create.checkpass" type="password"></el-input>
  15.             </el-form-item>
  16.             <el-form-item label="电话" prop="phone">
  17.                 <el-input v-model="create.phone"></el-input>
  18.             </el-form-item>
  19.             <el-form-item label="邮箱" prop="email">
  20.                 <el-input v-model="create.email"></el-input>
  21.             </el-form-item>
  22.             <el-form-item label="是否启用">
  23.                 <el-switch on-text="" off-text="" v-model="create.is_active"></el-switch>
  24.             </el-form-item>
  25.         </el-form>
  26.         <div slot="footer" class="dialog-footer">
  27.             <el-button @click="dialogCreateVisible = false">取 消</el-button>
  28.             <el-button type="primary" :loading="createLoading" @click="createUser">确 定</el-button>
  29.         </div>
  30.     </el-dialog>
  31.     <!-- 修改用户 begin-->
  32.     <el-dialog title="修改用户信息" v-model="dialogUpdateVisible"  :close-on-click-modal="false" :close-on-press-escape="false">
  33.         <el-form id="#update" :model="update" :rules="updateRules" ref="update" label-width="100px">
  34.             <el-form-item label="姓名" prop="name">
  35.                 <el-input v-model="update.name"></el-input>
  36.             </el-form-item>
  37.             <el-form-item label="电话" prop="phone">
  38.                 <el-input v-model="update.phone"></el-input>
  39.             </el-form-item>
  40.             <el-form-item label="邮箱" prop="email">
  41.                 <el-input v-model="update.email"></el-input>
  42.             </el-form-item>
  43.             <el-form-item label="是否启用">
  44.                 <el-switch on-text="" off-text="" v-model="update.is_active"></el-switch>
  45.             </el-form-item>
  46.         </el-form>
  47.         <div slot="footer" class="dialog-footer">
  48.             <el-button @click="dialogUpdateVisible = false">取 消</el-button>
  49.             <el-button type="primary" :loading="updateLoading" @click="updateUser">确 定</el-button>
  50.         </div>
  51.     </el-dialog>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

因为有表单 所以我们需要加入表单验证 
以及添加和编辑弹出的状态

  1. vm = new Vue({
  2.    el: '#user',
  3.     // 数据模型
  4.     data: function() {
  5.  
  6.         var validatePass = (rule, value, callback) => {
  7.             if (value === '') {
  8.                 callback(new Error('请再次输入密码'));
  9.             } else if (value !== this.create.password) {
  10.                 callback(new Error('两次输入密码不一致!'));
  11.             } else {
  12.                 callback();
  13.             }
  14.         };
  15.  
  16.         return {
  17.             url: 'http://172.10.0.201/api/v1/accounts',
  18.             users: [
  19.             ],
  20.             create: {
  21.                 id: '',
  22.                 username: '',
  23.                 name: '',
  24.                 password: '',
  25.                 checkpass: '',
  26.                 phone: '',
  27.                 email: '',
  28.                 is_active: true
  29.             },
  30.             currentId:'',
  31.             update:{
  32.                 name: '',
  33.                 phone: '',
  34.                 email: '',
  35.                 is_active: true
  36.             },
  37.             rules: {
  38.                 name: [
  39.                     { required: true, message: '请输入姓名', trigger: 'blur' },
  40.                     { min: 3, max: 15, message: '长度在 3 到 15 个字符'}
  41.                 ],
  42.                 username: [
  43.                     { required: true, message: '请输入用户名', trigger: 'blur' },
  44.                     { min: 3, max: 25, message: '长度在 3 到 25 个字符'},
  45.                     { pattern:/^[A-Za-z0-9]+$/, message: '用户名只能为字母和数字'}
  46.                 ],
  47.                 password: [
  48.                     { required: true, message: '请输入密码', trigger: 'blur' },
  49.                     { min: 6, max: 25, message: '长度在 6 到 25 个字符'}
  50.                 ],
  51.                 checkpass: [
  52.                     { required: true, message: '请再次输入密码', trigger: 'blur' },
  53.                     { validator: validatePass}
  54.                 ],
  55.                 email: [
  56.                     { type: 'email', message: '邮箱格式不正确'}
  57.                 ],
  58.                 phone:[
  59.                     { pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
  60.                 ]
  61.             },
  62.             updateRules: {
  63.                 name: [
  64.                     { required: true, message: '请输入姓名', trigger: 'blur' },
  65.                     { min: 3, max: 15, message: '长度在 3 到 15 个字符'}
  66.                 ],
  67.                 email: [
  68.                     { type: 'email', message: '邮箱格式不正确'}
  69.                 ],
  70.                 phone:[
  71.                     { pattern:/^1[34578]\d{9}$/, message: '请输入中国国内的手机号码'}
  72.                 ]
  73.             },
  74.             filter: {
  75.                 per_page: 10, // 页大小
  76.                 page: 1, // 当前页
  77.                 name:'',
  78.                 username:'',
  79.                 phone:'',
  80.                 is_active:'',
  81.                 sorts:''
  82.             },
  83.             total_rows: 0,
  84.             loading: true,
  85.             selected: [], //已选择项
  86.             dialogCreateVisible: false, //创建对话框的显示状态
  87.             dialogUpdateVisible: false, //编辑对话框的显示状态
  88.             createLoading: false,
  89.             updateLoading: false,
  90.         };
  91.     },

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91

下面就加入添加和编辑的函数

  1. methods: {
  2.         tableSelectionChange(val) {
  3.             console.log(val);
  4.             this.selected = val;
  5.         },
  6.         pageSizeChange(val) {
  7.             console.log(`每页 ${val} 条`);
  8.             this.filter.per_page = val;
  9.             this.getUsers();
  10.         },
  11.         pageCurrentChange(val) {
  12.             console.log(`当前页: ${val}`);
  13.             this.filter.page = val;
  14.             this.getUsers();
  15.         },
  16.         setCurrent(user){
  17.             this.currentId=user.id;
  18.             this.update.name=user.name;
  19.             this.update.phone=user.phone;
  20.             this.update.email=user.email;
  21.             this.update.is_active=user.is_active;
  22.             this.dialogUpdateVisible=true;
  23.         },
  24.         // 重置表单
  25.         reset() {
  26.             this.$refs.create.resetFields();
  27.         },
  28.         query(){
  29.             this.filter.name='';
  30.             this.filter.username='';
  31.             this.filter.phone='';
  32.             this.filter[this.select]=this.keywords;
  33.             this.getUsers();
  34.         },
  35.         // 获取用户列表
  36.         getUsers() {
  37.             this.loading = true;
  38.  
  39.             var resource = this.$resource(this.url);
  40.             resource.query(this.filter)
  41.                 .then((response) => {
  42.                     this.users = response.data.datas;
  43.                     this.total_rows = response.data.total_rows;
  44.                     this.loading = false;
  45.                 })
  46.                 .catch((response)=> {
  47.                     this.$message.error('错了哦，这是一条错误消息');
  48.                     this.loading = false;
  49.                 });
  50.  
  51.         },
  52.  
  53.         // 创建用户
  54.         createUser() {
  55.             // 主动校验
  56.             this.$refs.create.validate((valid) => {
  57.                 if (valid) {
  58.                     this.create.id=getuuid();
  59.                     this.createLoading=true;
  60.                     var resource = this.$resource(this.url);
  61.                     resource.save(this.create)
  62.                         .then((response) => {
  63.                             this.$message.success('创建用户成功！');
  64.                             this.dialogCreateVisible=false;
  65.                             this.createLoading=false;
  66.                             this.reset();
  67.                             this.getUsers();
  68.                         })
  69.                         .catch((response) => {
  70.                             var data=response.data;
  71.                             if(data instanceof Array){
  72.                                 this.$message.error(data[0]["message"]);
  73.                             }
  74.                             else if(data instanceof Object){
  75.                                 this.$message.error(data["message"]);
  76.                             }
  77.                             this.createLoading=false;
  78.                         });
  79.                 } 
  80.                 else {
  81.                     //this.$message.error('存在输入校验错误!');
  82.                     return false;
  83.                 }
  84.             });
  85.  
  86.         },
  87.  
  88.         // 更新用户资料
  89.         updateUser() {
  90.             this.$refs.update.validate((valid) => {
  91.                 if (valid) {
  92.                     this.updateLoading=true;
  93.                     var actions = {
  94.                         update: {method: 'patch'}
  95.                     }
  96.                     var resource = this.$resource(this.url,{},actions);
  97.                     resource.update({"ids":this.currentId},this.update)
  98.                         .then((response) => {
  99.                             this.$message.success('修改用户资料成功！');
  100.                             this.dialogUpdateVisible=false;
  101.                             this.updateLoading=false;
  102.                             //this.reset();
  103.                             this.getUsers();
  104.                         })
  105.                         .catch((response) => {
  106.                             var data=response.data;
  107.                             console.log(data);
  108.                             if(data instanceof Array){
  109.                                 this.$message.error(data[0]["message"]);
  110.                             }
  111.                             else if(data instanceof Object){
  112.                                 this.$message.error(data["message"]);
  113.                             }
  114.                             this.updateLoading=false;
  115.                         });
  116.                 } 
  117.                 else {
  118.                     //this.$message.error('存在输入校验错误!');
  119.                     return false;
  120.                 }
  121.             });
  122.         },
  123.  
  124.         // 删除单个用户
  125.         removeUser(user) {
  126.             this.$confirm('此操作将永久删除用户 ' + user.username + ', 是否继续?', '提示', { type: 'warning' })
  127.                 .then(() => {
  128.                     // 向请求服务端删除
  129.                     var resource = this.$resource(this.url + "{/id}");
  130.                     resource.delete({ id: user.id })
  131.                         .then((response) => {
  132.                             this.$message.success('成功删除了用户' + user.username + '!');
  133.                             this.getUsers();
  134.                         })
  135.                         .catch((response) => {
  136.                             this.$message.error('删除失败!');
  137.                         });
  138.                 })
  139.                 .catch(() => {
  140.                     this.$message.info('已取消操作!');
  141.                 });
  142.         },
  143.  
  144.         //删除多个用户
  145.         removeUsers() {
  146.             this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', { type: 'warning' })
  147.                 .then(() => {
  148.                     console.log(this.selected);
  149.                     var ids = [];
  150.                     //提取选中项的id
  151.                     $.each(this.selected,(i, user)=> {
  152.                             ids.push(user.id);
  153.                         });
  154.                     // 向请求服务端删除
  155.                     var resource = this.$resource(this.url);
  156.                     resource.remove({ids: ids.join(",") })
  157.                         .then((response) => {
  158.                             this.$message.success('删除了' + this.selected.length + '个用户!');
  159.                             this.getUsers();
  160.                         })
  161.                         .catch((response) => {
  162.                             this.$message.error('删除失败!');
  163.                         });
  164.                 })
  165.                 .catch(() => {
  166.                     this.$Message('已取消操作!');
  167.                 });
  168.         }
  169.     }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/661952
推荐阅读