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

(编辑：jimmy 日期: 2024/11/28 浏览：3 次 )

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对应得字段用数组返回即可

总结

上一篇：JavaScript字符和ASCII实现互相转换
下一篇：JavaScript监听键盘事件代码实现