element checkbox 怎么取 id 而不是label

最新推荐文章于 2022-02-25 07:52:01 发布
最新推荐文章于 2022-02-25 07:52:01 发布
阅读量1.8k 收藏 1
点赞数 5
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z591102/article/details/116205697
版权 
// el-checkbox 绑定的checkList返回的是label的值 只需要lable写成id 中间写成label显示即可
<el-checkbox-group v-model="checkList">
    <el-checkbox :label="item.id">{{item.label}}</el-checkbox>
</el-checkbox-group>

 

高先生的猫
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui CheckBox全选.txt
12-24
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件
vue 使用element-ui的el-checkbox-group组件
wtt_1990的博客
08-07 1万+
<el-checkbox-group v-model="rulesId" class="rules-label" > <el-checkbox v-for="(rule,i) in rulesList" :label="rule.leavel_id" :key="rule.leavel_id" :value="rule.leavel_id" v-model="rule.isChecked" @change="val => handleChecked(val,rule)"&gt.
el-checkbox-group使用和数据渲染
wxCSDN1997的博客
12-31 1109
<td class="tab_title_last"> <el-checkbox-group v-model="item.evaluationType"> <el-checkbox v-for="(i,index) in totalTypes" :label="i.id" :value="i.id" :key="i.id" name="type" ..
el-checkbox-group获取选中的id 禁止选中已有项
-
07-19 1822
<el-checkbox-group v-model="checkModel"> <el-checkbox @change="getCheckModel(item)" v-for="item in checkList" :key="item.id" :disabled="checkModel_.some(item_ => item_ == item.name)" :label="item.name"></el-checkbox&g
ElementUIz中el-checkbox-group多选框组的使用，怎样设置一组选项与获取所选值
BADAO_LIUMANG_QIZHI的博客
08-18 6467
场景 最终实现的效果 checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。 label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。 官方示例代码 <template> <el-checkbox-group ..
element ui checkbox-group多选框怎么选中id值
lilyheart的博客
09-01 4633
在项目开发中，使用多选框组，选中时想要取到该项的id而不是label值： checkbox-group：Element ui 中的组件，只需要在 Group 中使用v-model绑定Array类型的变量即可,并且绑定change实践，el-checkbox 的 label属性是该 checkbox 对应的值，所以只要label绑定id就可以了，显示的话使用label； 看代码 <el-checkbox-group v-model="checked" @change="test"> .
element ui多选框组checkbox-group的使用
honeymoon_的博客
08-09 4619
111
elementUI使用checkboxgroup组件，获得value的数字集合，而不是label的文字集合 - 解决篇
草巾冒小子的博客
07-21 1万+
全部代码如下： <template> <div id="htmlWrap" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)...
elementui checkbox-group多选框怎么选中id值
weixin_34253126的博客
03-20 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
el-checkbox-group使用中需要注意点
Sophiego的博客
03-06 2万+
使用element 复选框过程中想要获取元素的id值数组(作为接口入参），但显示为元素名称， 按如下写,要不获取到的checked为名称，要不获取到id报错 &lt;el-checkbox-group v-model="checked" @change="handleChecked"&gt; &lt;el-checkbox v-for="item in data" :label="item....
详解element-ui表格中勾选checkbox，高亮当前行
10-16
主要介绍了详解element-ui表格中勾选checkbox，高亮当前行，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JS通过识别id、value值对checkbox设置选中状态
11-21
通过value值设置checkbox选中 html <input type="checkbox" name="ChekRole" value="1" >超级管理员 <input type="checkbox" name="ChekRole" value="2">学生 <input type="checkbox" name=...
asp.net checkbox 动态绑定id GridView删除提示
10-29
asp.net checkbox 动态绑定id,需要的朋友可以参考下。虽然简单但不知道挺麻烦的。GridView删除提示
element el-checkbox-group 的用法
web18224617243的博客
02-25 3409
el-checkbox的lable的用法很关键。 lable对应的是v-model绑定的数组里的对象。 例如：如果lable直接设置为整个item，则v-mode绑定的数组里的对象是整个item。如果lable设置为item的某个值，则v-model绑定的数组里的对象是被绑定的item的某个值。 data定义: sendTypeList: [{ value: 1, label: "手机短信" }, { value: 2, label: "邮箱" }, ],
vue/elementUI CheckBox多选框赋值(设置`el-checkbox-group`以及`v-for`遍历`el-checkbox`)
★【World Of Moshow 郑锴】★
01-07 1万+
最近有个功能，需要给项目添加一个多选赋值的功能，项目基于renren-security也就是半js半vue模式的前端。 **需求展示：** - 给定一个字段，例如技术领域，页面上设置为checkbox多选项。 - 选择之后，保存json字符串到数据库（直接value的形式） - 列表展示直接用json字符串展示 - 详情页面根据之前选定的json字符串设置对应的选项打勾
vue elementUI CheckBox多选框赋值
Super_woman21的博客
11-21 3556
1、从后端拿到返回值； 2、用split（‘，’）取出每个值； 3、需要用parseInt（）转为整数，然后赋值给绑定值 <el-form-item label="游戏标签" required> <!--{{biaoqianName}}--> <span style="color: red;margin-left:...
el-checkbox如何同时获得value值和label的值
热门推荐
ThisEqualThis的博客
05-04 2万+
在使用el-checkbox时有时候需要往后台传送value值（定义的code）和label值，el-checkbox组件默认获取的都是label属性中的值，如果label中设置的是code，那如何获取el-checkbox的显示文字（label）呢？ 我们可以将value与label拼接在一起赋值给checkbox的label属性，然后获取的时候进行处理。 以el-checkbox-group为...
elementUI的el-select 默认值显示value不显示label问题
lqlq54321的博客
06-18 5779
el-select 默认值显示value不显示label问题 在做编辑页面时 需要取到列表项数据回显默认值 在做select回显的时候遇到了这个问题 明明拿到的值和value中的值一样 但是就是不转换成label 这种情况一般出现在value为数字的情况 问题 原因是 返回的数字和el-option选框里value值的类型对应不上 一个是 Numer 一个是 String 解决后如图 解决办法1 既然el-option选框需要的value属性是String类型的,可以利用row这个一行数据,拿到el-o
Java_Spring Boot 3主分支2其他分支和Spring Cloud微服务的分布式配置演示Spring Cl.zip
最新发布
05-22
Java_Spring Boot 3主分支2其他分支和Spring Cloud微服务的分布式配置演示Spring Cl
element plus 报错 Incorrect use of ＜label for=FORM_ELEMENT＞
09-07
在Element Plus中，如果出现错误提示"Incorrect use of <label for=FORM_ELEMENT>"，可以参考以下代码实现来解决这个问题： ```html <el-form-item label="姓名"> <span slot="label"> 姓名 <el-tooltip placement="top"> <div slot="content"> 第一行信息<br/> 第二行信息 </div> <i class="el-icon-question"></i> </el-tooltip> </span> <input type="checkbox" id="check" style="display: none;" @click="ss()"/> <label :for="'check' + Math.random()" class="mytext"> <img src="img/check.jpg"> </label> </el-form-item> ``` 通过为label的for属性添加一个动态的唯一标识符，比如使用Math.random()生成一个随机数，可以避免"Incorrect use of <label for=FORM_ELEMENT>"错误的出现。这样就可以正常使用label标签与checkbox进行关联了。 同时，如果你在低版本的IE浏览器中遇到了这个问题，可以使用下面的JavaScript代码来解决： ```javascript function initIE() { if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1){ var a = document.getElementsByTagName("label"); for(var i=0;i<a.length;i++){ if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG"){ a[i].childNodes.item(0).forid = a[i].htmlFor; a[i].childNodes.item(0).onclick = function(){ var e = document.getElementById(this.forid); switch(e.type){ case "checkbox": if ($(e).is(':checked')) { $(e).prop("checked", false); }else{ $(e).prop("checked", true); } $(e).click(); break; } if ($(e).is(':checked')) { $(e).prop("checked", false); }else{ $(e).prop("checked", true); } } } } } } ``` 将以上代码放置在页面加载完成后执行的地方，如放在<script>标签中或在页面底部添加<script>标签，并调用`initIE()`函数，这样就可以解决IE低版本浏览器不兼容label标签的for属性的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值