來看這段代碼:
<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值即可,初始化方式多種多樣,可自行發揮