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