首页 >> js开发 >> jsVue + element 实现多选框组并保存已选id集合的示例代码js大全
jsVue + element 实现多选框组并保存已选id集合的示例代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
Vue + element 实现列表复选框并保存已选id集合1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源
2.初始化tableData集合
3.循环遍历需要显示得值
4.在多选框组上添加chang事件
tableData: [{
date: '2021-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2021-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2021-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2021-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
tableData: [{
date: '2021-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2021-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2021-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2021-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
{{c.date}}
{{c.date}}
ch(){
console.log(this.checkList)
},
ch(){
console.log(this.checkList)
},需要反显得话 只要后台将与:label对应得字段用数组返回即可总结总结总结
2.初始化tableData集合
3.循环遍历需要显示得值
4.在多选框组上添加chang事件
tableData: [{
date: '2021-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2021-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2021-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2021-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
tableData: [{
date: '2021-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2021-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2021-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2021-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
ch(){
console.log(this.checkList)
},
ch(){
console.log(this.checkList)
},需要反显得话 只要后台将与:label对应得字段用数组返回即可总结总结总结
相关文章:
- js谈一谈vue请求数据放在created好还是mounted里好js大全
- js代码JavaScript JSON使用原理及注意事项
- jsvue中touch和click共存的解决方式js大全
- js解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题js大全
- js解决vue中的无限循环问题js大全
- jsvue 监听窗口变化对页面部分元素重新渲染操作js大全
- jsvue键盘事件点击事件加native操作js大全
- jsvue+element-ui JYAdmin后台管理系统模板解析js大全
- jsJS的时间格式化和时间戳转换函数示例详解js大全
- jsJS实现audio音频剪裁剪切复制播放与上传(步骤详解)js大全