elementPlus el-checkbox重名被同时选中及基本使用

问题背景

主要是使用的时候出现了一点问题,问题如下
1.显示多选的时候需要是中文显示,但是发送给后台的数据需要是id的数组
2.有同名的标签,导致选择的时候会被同时选中

问题描述

一开始的代码:
image.png
对应的界面:
image.png
出现问题:
因为有两个同名的,所以一选择输入框的时候,就会同时选择两个,如下图:
image.png
以及拿到的checkIdList是以中文名为值的数组

问题解决

经过了激烈的搜索之后,终于在github/element的issue中发现有人也提了类似的问题。
参考:https://github.com/ElemeFE/element/issues/647
解决方案:
將一开始的代码改成这样,利用插槽去显示中文名,然后label是对应的后台需要的id,那么你的checkIdList对应的也是id的数组了。 更巧妙的是刚好中文名相同会同时选中的问题也解决完了,喔靠,突然茅塞顿开:

 <el-checkbox-group v-model="checkIdList">
          <el-checkbox v-for="item in FieldList" :key="item.id" :label="item.id">
            {{ item.fieldCn }}
          </el-checkbox>
</el-checkbox-group>

image.png

哪有什么爱不爱写文章,脑子笨而已

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值