vue+element-ui实现多选框绑定数组对象。为什么不能回显

本来的逻辑是点全选获取全部单选的绑定值的数组。就可以让下面所有的选中。但是如果下面单选绑定的不是一个值。而是一个对象的话。即使点击全选获取所有单选对象组成的数组也不能回显。

直接按照官网的例子修改一下.让他绑定的值是对象。发现你写了checkedCities选中的对象内容，但是并没有回显

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

  export default {
    data() {
      return {
        checkAll: false,//true选中。false取消选中
        cities: [{"cityname":'上海',"value":"1"}, {"cityname":'北京',"value":"2"},{"cityname":'广州',"value":"3"},{"cityname":'深圳',"value":"4"}],
        checkedCities:[{"cityname":'上海',"value":"1"}],
        isIndeterminate: false
      };
    },
    methods: {
      //全选
      handleCheckAllChange(val) {//全选val是true或者false
        this.checkedCities = val ? this.cities : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    },
created(){
   
}
  };
</script>

解决的办法是我们先绑定value值，不绑定对象。因为我们绑定对象的原因无外乎是接口需要传这些对象的内容不但要value还要cityname。那么我们可以退而求其次的。绑定value值，在提交的时候在处理一下。根据value值获取cityname这样就行了。虽然是有点麻烦。

明天再具体的写怎么根据value获取ciytname的方法吧。。可能这个简单大家都知道。今天先下班，哈哈哈