欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

Vue + element 实现多选框组并保存已选id集合的示例代码

时间:2021-03-22 09:08:57|栏目:vue|点击:

Vue + element 实现列表复选框并保存已选id集合

1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源
2.初始化tableData集合
3.循环遍历需要显示得值
4.在多选框组上添加chang事件

tableData: [{
   date: '2016-05-02',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1518 弄'
  }, {
   date: '2016-05-04',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1517 弄'
  }, {
   date: '2016-05-01',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1519 弄'
  }, {
   date: '2016-05-03',
   name: '王小虎',
   address: '上海市普陀区金沙江路 1516 弄'
  }]
<el-checkbox-group v-model="checkList" @change="ch">
    <div v-for="(c,index) in tableData" :key="index">
     <el-checkbox :label="c.date">{{c.date}}</el-checkbox>
    </div>
   </el-checkbox-group>
ch(){
  console.log(this.checkList)
 },

在这里插入描述

需要反显得话 只要后台将与:label对应得字段用数组返回即可

总结

上一篇:vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

栏    目:vue

下一篇:Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

本文标题:Vue + element 实现多选框组并保存已选id集合的示例代码

本文地址:http://www.codeinn.net/misctech/85660.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有