elementUI的checkBox已经checkGroup的数据绑定为对象时的回显问题的解决_element checkbox 组件绑定数组对象时,不能回显

最近在开发过程中使用elementUI时，用到了复选框checkBox，但是因为绑定的数据是对象，无法做到数据的回显。然后又回头仔细的查看的文档，发现文档中介绍说checkBox和checkGroup通过v-model绑定的数据只能是number/string/Array，不支持绑定对象数据的。

之后在百度一番过后，发现百度上的提供的方法大多数都是直接去修改elementUI的源码，然后重新打包，将打包的elementUI源码放入到项目中实现checkBox对对象数据的支持，但是这样的话，我个人认为会出现一个问题，那就是项目在迭代更新的过程中会不断的进行打包操作，如果删除了node_modules文件夹，那么就需要重新将打包好的修改过的elementUI源码包再次放入到项目中去，会有一些不方便。那么，我自己思考了一番以后，对这个问题拥有了一个解决方案，在这里做一个记录，也方便各位码友进行参考和补充。
我的想法是：既然checkBox不支持对象，那么我们在通过v-model进行绑定的时候就不要绑定对象数据了可以再定义数据，然后绑定，将源数据中的对象的name或者其他不会相同的数据通过label绑定将数据放入这个新的数组中去，然后通过change时间，将遍历到的数组中的对象传递出去，放入到想要获取到的那个数组中去，具体情况看如下代码：

<template>
    <div>
         <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <div v-for="city in cities" :key="city.name">
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange(city)">
                  <el-checkbox :label="city.name">{{city.name}}</el-checkbox>
              </el-checkbox-group>
            </div>

        </div>
</template>
<script>
const cityOptions = [
    {
        id:1,
        name:'北京'
    },
    {
        id:2,
        name:'上海'
    },
    {
        id:3,
        name:'广州'
    }
]
  export default {
    beforeMount(){
        console.log('挂载前',this.checkedCities);
    },
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        checkedCities2:[
            {
                id:2,
                name:'上海'
            },
            {
                id:3,
                name:'广州'
            }
        ],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        console.log('选中的value',value.name);
        // let checkedCount = value.length;
        // this.checkAll = checkedCount === this.cities.length;
        // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        if(this.checkedCities2.indexOf(value) === -1){
          this.checkedCities2.push(value)
        }else{
          this.checkedCities2.splice(this.checkedCities2.indexOf(value),1)
        }
        console.log('打印数组',this.checkedCities);
        console.log('打印数组222',this.checkedCities2);
      }
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

2023年8月11号，有码友指出说做不到全选的控制，我在这里做了一个优化，使其能够做到多选控制，并且在优化过程中，发现了其他一些bug，同时进行了处理。也感谢这位码友对我书写内容的建议。优化后的代码如下：

<template>
  <div class="test">
       <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <div v-for="city in cities" :key="city.name">
            <el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange(city)">
                <el-checkbox :label="city.name">{{city.name}}</el-checkbox>
            </el-checkbox-group>
          </div>

      </div>
</template>
<script>
//模拟数据
const cityOptions = [
  {
      id:1,
      name:'北京'
  },
  {
      id:2,
      name:'上海'
  },
  {
      id:3,
      name:'广州'
  }
]
export default {
  beforeMount(){
    //挂载前先判断是否有值
    if(this.checkedCities1.length === 0) { //没有值的情况下，全选和其他内容的勾选都是为空的
      this.checkAll = false
      this.isIndeterminate = false
    }else{
      this.checkedCities1.forEach((name) => { //如果有值的情况下，要把对象放到数组2中，因为设想的情况就是从接口拿到就是一个对象
        this.cities.forEach((city) => {
          if(name == city.name) this.checkedCities2.push(city)
        })
      })
    }
  },
  data() {
    return {
      checkAll: false,
      checkedCities1: ['上海', '广州'],
      checkedCities2:[],
      cities: cityOptions,
      isIndeterminate: true
    };
  },
  methods: {
    handleCheckAllChange(val) {
      if(val) { //如果全选为true，要把所有的name放到数组1中
        this.checkedCities1 = []
        this.checkedCities2 = []
        cityOptions.forEach((city) => {
          this.checkedCities1.push(city.name)
          this.checkedCities2.push(city)
        })
      }else {//如果全选为false，要把数组1和数组2都置空
        this.checkedCities1 = []
        this.checkedCities2 = []
      }
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      if(this.checkedCities2.indexOf(value) === -1){//选择了多选项以后，判断数组2有没有包含，没有就添加进去
        this.checkedCities2.push(value)
        if(this.checkedCities2.length === cityOptions.length) { //数组2的长度等于源数据的长度，全选要加上勾选
          this.checkAll = true
          this.isIndeterminate = false
        }else if(this.checkedCities2.length != 0){//数组2不能等于源数据长度，全选是横杆的状态，这里因为是添加，所以肯定不会有0出现
          this.checkAll = false
          this.isIndeterminate = true
        }
      }else{
        this.checkedCities2.splice(this.checkedCities2.indexOf(value),1)
        if(this.checkedCities2.length < cityOptions.length ) {//数组2删除数据时，判断数组2长度小于源数据长度，全选是横杆的状态
          if(this.checkedCities2.length === 0){//数组2长度等于0，全选要变成未选的空白状态
            this.checkAll = false
            this.isIndeterminate = false
            return
          }
          this.checkAll = false
          this.isIndeterminate = true
        }
      }
      console.log('打印数组checkedCities',this.checkedCities1);
      console.log('打印数组checkedCities2',this.checkedCities2);
    }
  }
};
</script>

<style lang="scss" scoped>
.test{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

以上就是我想到的解决方案，还请各位码友多多指教。