来看这段代码：
<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值即可，初始化方式多种多样，可自行发挥
网友评论