Vue + element 实现多选框组并保存已选id集合的示例代码
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 + element 实现多选框组并保存已选id集合的示例代码的文章就介绍到这了,更多相关vue element 多选框组内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！
-
本文向大家介绍vue+element UI实现树形表格带复选框的示例代码，包括了vue+element UI实现树形表格带复选框的示例代码的使用技巧和注意事项，需要的朋友参考一下 一：在component文件夹下新建如下treeTable文件夹，里面有2个文件： eval.js:将数据转换成树形数据 index.vue:树形表格组件 二：在需要的地方引入该组件： 例如：在component文件夹下
-
本文向大家介绍vue实现的树形结构加多选框示例，包括了vue实现的树形结构加多选框示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了vue实现的树形结构加多选框。分享给大家供大家参考，具体如下： 前面说了如何用递归组件来写vue树形结构，写了树形结构还要在前面加多选框，然后往数组里push选项，并在左边显示出来，然后左边进行拖拽排序，拖拽排序上一篇文章我已经介绍过了，在这我就不介绍了，如
-
本文向大家介绍js 实现复选框只能选择一项的示例代码，包括了js 实现复选框只能选择一项的示例代码的使用技巧和注意事项，需要的朋友参考一下 实例如下所示： 以上这篇js 实现复选框只能选择一项的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍OpenCV实现鼠标框选并显示框选区域，包括了OpenCV实现鼠标框选并显示框选区域的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了OpenCV实现鼠标框选并显示框选区域的具体代码，供大家参考，具体内容如下 cvSetImageROI函数(基于给定的矩形设置图像的ROI（感兴趣区域，region of interesting）) void cvSetImageROI（I
-
本文向大家介绍vue.js实现单选框、复选框和下拉框示例，包括了vue.js实现单选框、复选框和下拉框示例的使用技巧和注意事项，需要的朋友参考一下 Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。 一、单选框 在传统的HTML中实现单选框的方法如下： 注：这里name属性值必
-
本文向大家介绍Android实现单选与多选对话框的代码，包括了Android实现单选与多选对话框的代码的使用技巧和注意事项，需要的朋友参考一下 android开发中实现单选与多选对话框的代码非常简单，具体代码如下所示： 以上所述是小编给大家介绍的Android实现单选与多选对话框的代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！