elment-ui+vue實現多選框遍歷數組對象

來看這段代碼:

<template>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  const cityOptions = ['上海', '北京', '廣州', '深圳'];
  export default {
    data() {
      return {
        checkedCities: ['上海', '北京'],
        cities: cityOptions
      };
    }
  };
</script>

正常的通過checkbox遍歷數組操作很明顯不滿工作需求,大多數時候需要遍歷的是數組對象,個人接觸到以下三種解決方案:

在el-checkbox-group中,v-model 的是el-checkbox中 label 綁定的值,即checkedCities是由任意個city組成的數組

1:v-model整個數組對象的子項【不支持反顯】

<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:v-model整個數組對象的子項的key值【支持反顯】

<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:v-model整個數組對象【支持反顯,可以加入輸入框或者其他操作】

<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值,即可實現勾選和取消勾選的操作

<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>

我們不使用多選框組el-checkbox-group,直接循環數組對象,想實現取消勾選效果我們原數組缺少一個字段,這時我們可以給這個數組對象的每一項追加一個用來勾選的字段:isChecked;
當前如果項目中正好有可用的字段能用來表示選中和未選中狀態,直接拿來用就沒必要自行追加這個字段了
追加如下,必須使用$set,這樣vue才能動態響應變化后的數組

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

這種辦法其實是利用了vue的響應式,比如我們選擇了上海

我們得到的響應之后的cities的值為:
[{id: 1, cityName: '上海', isChecked:true}, {id: 2, cityName: '北京', isChecked:false}]

這種方法下我們還適應比較復雜的對象,比如我們需要在勾選框中追加輸入框,只要在div的循環內新增el-input并綁定上相對應的值即可,還能響應的得到輸入結果
這種方法下的反顯,只要在初始對象中的isChecked值即可,初始化方式多種多樣,可自行發揮

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容