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






