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
    })
  }
},

你可能感兴趣的:(vue,js,javascript)