vue实现列表的复选框,单选,多选

不适用组件库的方式,实现列表的单选,多选。

一,在获取到列表数据赋值给parkList后,动态的添加checked属性为false
// 将列表parkList进行遍历动态添加checked为false
 this.parkList.map(item => {
     this.$set(item, 'checked', false)
 })
二,将复选框绑定checked属性,属性值为动态添加checked。
<-- 通过v-for生成的,每一行前面的复选框,item为v-for的每一项 -->
<input type="checkbox" :checked="item.checked" @click="changeChecked(item.id)">
三,实现单选事件,方法很简单,代码如下。
changeChecked(id) {
  this.parkList.map(item => {
     if(item.id === id) {
        item.checked = !item.checked
      }
    })
},
四,将标题的复选框绑定一个data中的状态值,
<-- 顶部标题行前面控制全选和全不选的复选框 -->
<input type="checkbox" v-model="checkAll" @click="checkedAll()">
 data() {
 	return {
 		checkAll: false
 	}
 }
五,实现全选和全不选方法

如果点击全选的复选框,此时checkAll为false,遍历将每一行的复选框绑定的checked属性设为true,再次点击将,相反。。。设为false。

方法里面的checkAll为点击改变之前的布尔值。
checkedAll() {
  if(this.checkAll) {
      this.parkList.map(item => {
       item.checked = false
      })
    } else {
     this.parkList.map(item => {
       item.checked = true
    })
  }
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值