elementplus 的 el-checkbox 官方代码中的多选框组实例如下:
上方代码中选中哪个选项就会往 checkList 数组中加入选项的 label 值,如果需要实现展示的值与选中的值不一样要怎么实现呢?
解决方法
el-checkbox组件中存在插槽,只需要在 el-checkbox 标签中间传入要展示的文本即可,代码如下:
<el-checkbox-group v-model="status">
<el-checkbox
v-for="(value, key) in statusList"
:key="key"
:label="key"
>
{{ value }}
</el-checkbox>
</el-checkbox-group>
上方代码中,展示出来的是 value 的值,而实际选中后存入数组的是 key 值。