Vue + element 实现多选框组并保存已选id集合的示例代码
更新时间：2020年06月03日 14:13:32 作者：立志光明顶
这篇文章主要介绍了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-cli3单页构建大型项目方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了使用 Vue 实现一个虚拟列表的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了关于Element-UI中slot的用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue 音乐App QQ音乐搜索列表最新接口跨域设置方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Vue.js实现一个todo-list的上移下移删除功能,需要的朋友可以参考下2017-06-06
本篇文章主要介绍了vue keep-alive请求数据的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Vue3中keep-alive的使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了基于vue实现网站前台的权限管理(前后端分离实践)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了VUE记账凭证模块组件的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-03-03
最新评论