关于element ui 的Checkbox 多选框el-checkbox-group的一点点思考
程序员文章站
2022-06-16 08:03:10
我们经常会使用element ui的el-checkbox-group来作为复选框组件。实例如下： {{city}} &...
我们经常会使用element ui的el-checkbox-group来作为复选框组件。实例如下：
<template>
<el-checkbox-group
v-model="checkedCities"
:min="1"
:max="2">
<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>
但是现实开发中遇到了一个问题，就是选中某一个复选框我需要传递一个对象而不是一个字符串值，并且在使用v-for循环中，我们通常也是附加一个对象而不是单单的一个属性，所以这里就需要稍微变通一下。如下所示：
<el-checkbox-group v-model="checkList">
<el-checkbox :label="item" v-for="(item,index) in checkedList" :key="index" >{{item.name}}</el-checkbox>
</el-checkbox-group>
如代码所示，通过实践后发现v-model="checkList"得到的数据来自于<el-checkbox 中的label，也就是说label是一个字符串，那就是一个字符串列表，label是一个对象，那得到的checkList就是一个对象列表。那这样就简单了，我们显示的lable直接写到标签内，也就是item.name。这样就解决了对象传递问题。
还有一点，怎么控制checkbox的显示，其实这里不用checkbox的checked属性，而是checkList里面有就会选中，没有就不会选中。所以控制显示就是控制checkList数据驱动啦。所以简单的使用checkbox和CheckBoxgroup在api上还是有不同的，这点需要注意，反正对于我们来说，越简单越好。
本文地址：https://blog.csdn.net/Mr_carry/article/details/107933531
上一篇： 1_GPIO