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的方法吧。。可能這個簡單大家都知道。今天先下班，哈哈哈