el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)

发布时间:2024年01月24日

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

文章来源:https://blog.csdn.net/jiangjunyuan168/article/details/135827230
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。