Vue + element 实现多选框组并保存已选id集合

   日期:2020-06-03     浏览:336    评论:0    
核心提示:Vue + element 实现列表复选框并保存已选id集合1.引用element组件多选框组,checkList为提交后台数据得数组,tableData为数据源2.初始化tableData集合3.循环遍历需要显示得值4.在多选框组上添加chang事件 tableData: [{ date: 2016-05-02, name: 王小虎, address: 上海市普陀区金沙江路 1518 弄 }, {

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

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服