ElementUI的lect选择器的坑(单选,多选)

更新时间:2023-07-07 16:44:12 阅读: 评论:0

ElementUI的lect选择器的坑(单选,多选)on january
csa前⾔
mgmtelement的组件是挺⽅便和简洁的,但是我在项⽬中遇到了关于它的很多坑,官⽹的⽂字过于官⽅和简洁,以⾄于经常犯摸不着头脑的问题,这篇总结下我遇到的lect选择器的坑。
单选功能
在另⼀篇博客讲到了下拉框的绑值问题,我的下拉框动态绑值时出现了输⼊框内绑定了value值的情况,在我另⼀篇有讲:
通过在选择器的change事件中加⼊this.$forceUpdate(); 解决。
多选功能
这个坑就很烦了,我找了很久的错,⾛了很多的弯路。
⾸先是⽆法在弹出的对话框中绑值的情况
因为缺少了最重要的属性:value-key(如果 Select 的绑定值为对象类型,请务必指定value-key作为它im软件
的唯⼀性标识。)
<!-- ⼩⼼这⾥的required属性将会覆盖⾃定义的验证规则!-->
<el-form-item label="选择⾓⾊" prop="roleId" :label-width="formLabelWidth">
<input type="hidden" name="empId" :value="pId"/>
英语翻译在线翻译
ab<!-- ⼤坑,value-key属性-->
<el-lect v-model="leId" value-key="roleId" clearable filterable multiple placeholder="请选择⽤户⾓⾊">
<el-option v-for="item in roleOptions" :key="leId" :label="leName" :value="leId">
</el-option>
</el-lect>
</el-form-item>
clearable:使当前下拉框具有清空的功能,默认fal
高一英语必修一知识点
filterable:使当前下拉框具有搜索的功能,默认falgiuliano
在动态绑值时要注意key属性也是必须的。
这个 value-key 属性什么意思呢,就是这个组件会根据这个属性去绑定你所给的数据,所以在多选情况下这个属性是必须的,也可以把它当作下拉框的value值。
这样我解决了第⼀个问题,但是新问题也来了:
在对话框中绑定了value值⽽⾮选中标签
值是绑定成功了,但是它绑定的value⽽我想要的形式,于是我想到了⽅法:
let temp = les == null ? [] : les.split(",");
let arr = [];
for (var i = 0; i < temp.length; i++) {
if (leOptions.length > 0)
if (leId == temp[i]) arr.leName)
});
}
leId = arr;
然后标签可以正常显⽰了:
在新增权限时遇到的问题
私语的意思我给⽤户指定了六个⾓⾊,但是发送请求后台报错,并在控制台打印了请求参数如下:
这我就很迷了,我觉得可能是数据双向绑定的问题,因为Vue官⽅有说过data⽆法检测到数组及对象的属性变化从⽽影响DOM,需要⾃⼰⼿动通过Vue.$t⽅法赋值从⽽影响DOM。
从数据⽅⾯⼊⼿我的解决⽅案如下:
//获取到值
let arr = [];
for (var i = 0; i < leId.length; i++) {
if(leId[i]==leName||leId[i]==leId)
you make me cryarr.leId);
})
}
获取到的值:
可以看到符合我要的数据标准了,发送请求也已成功,希望可以帮助他⼈避免⼀些坑把!
补充解决
这个弯路是我⾃⼰⾛的,以上的错误经过我的排查后发现是由于后台传递值的类型与下拉框中的value值类型不匹配造成的(就是数字和字符串不匹配),这么个问题居然搞了半天,记录⼀下⾃⼰的踩坑把。

本文发布于:2023-07-07 16:44:12,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/170127.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:下拉框   属性   问题   绑定
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图