vue+element-ui实现多选框绑定数组对象

现在我们有一个数组对象 ： const cityOptions = [{id: 1, cityName: ‘上海’}, {id: 2, cityName: ‘北京’}];

1 :label = city，直接绑定对象【不支持反显】

<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city" :key="city.id">{{city.cityName}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = [{id: 1, cityName: '上海'}, {id: 2, cityName: '北京'}];
  export default {
    data() {
      return {
        checkedCities: [],
        cities: cityOptions
      };
    }
  };
</script>

在v-for="city in cities"中，我们得到的city是整个子项(如勾选了上海):{id: 1, cityName: ‘上海’}，
v-model得到的是: [{id: 1, cityName: ‘上海’}]，如果不需要对得到的结果进行二次处理，还能动态的得到所需整个数组对象的子集，这种办法就很合适。（但是这种办法我还没能实现数据的反显 ）

2 :label = city.id，绑定对象的id【支持反显】

<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city.id" :key="city.id">{{city.cityName}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = [{id: 1, cityName: '上海'}, {id: 2, cityName: '北京'}];
  export default {
    data() {
      return {
        checkedCities: [],
        cities: cityOptions
      };
    }
  };
</script>

在v-for="city in cities"中，我们得到的city是整个子项(如勾选了上海):{id: 1, cityName: ‘上海’}，el-checkbox的label绑定的是city.id，即我们v-model得到的是: [1]，这种情况下，我们可以存着checkedCities的值，如：const checkedList= […checkedCities] ;
** 反显的时候，给checkedCities设置初值，this.checkedCities = checkedList；即可得到反显之后的结果。 **

3 不使用el-checkbox-group，直接循环el-checkbox【支持反显，并追加多选框功能】

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

参考这段代码，当我们仅使用el-checkbox时，v-model一个bool值，即可实现勾选和取消勾选的操作

参考这段代码，当我们仅使用el-checkbox时，v-model一个bool值，即可实现勾选和取消勾选的操作

<template>
  <div v-for="city in cities" :label="city "  :key="city.id">
    <el-checkbox   v-model="city.isChecked">{{city.cityName}}</el-checkbox>
  </div>
</template>
<script>
  const cityOptions = [{id: 1, cityName: '上海'}, {id: 2, cityName: '北京'}];
  export default {
    data() {
      return {
        checkedCities: [],
        cities: cityOptions
      };
    }
  };
</script>

 

如果没有用来判断是否选中的字段，可自行追加。
追加代码如下，必须使用$set，这样vue才能动态响应变化后的数组

this.cities.forEach(cityItem => {
  this.$set(cityItem ,  'isChecked',  false)
})

 这种办法其实是利用el-checkbox来改变的 isChecked 的值，比如选择了上海

我们得到的响应之后的cities的值为：
[{id: 1, cityName: ‘上海’, isChecked:true}, {id: 2, cityName: ‘北京’, isChecked:false}]

这种方法下可以尽情增加自定义的功能，可以嵌入其他的form:

1. 追加输入框，只要在div的循环内新增el-input并绑定上相对应的值即可，还能响应的得到输入结果

** 这种方法下的反显，只需要控制好isChecked的初始值即可，初始化方式多种多样，可自行发挥 **