elementPlus踩坑纪要|一天多的时间代价才搞明白el-cascader控件懒加载数据后赋值回显问题

发布时间:2022-11-11

    elementPlus是饿了么基于vue3开发的优秀控件集,但其中的el-cascader控件数据回显怎么都不能正常的显示出来,看文档又没有终点提醒,网上搜索倒是有不少解决方案,但经过一天的时间来回测试才搞明白其中的蹊跷,其实就是两个细节注意到是很容易就能实现数据的正确回显的,踩坑过程就不提了,方便碰到同样问题的朋友节约时间快速解决问题即可。

el-cascader控件赋值数据正确回显注意要点

el-cascader的数据回显就两个主要属性搞明白即可:options、props

1、options的内容是数组而不能是字符串(先用的网上提供的回显方法,转成字符串显示是可以,但最后发现下边的方法绕远路了,只要本文提到的几点都注意设置对,给v-model绑定值就可以正常回显)

this.$refs.industry.inputValue=[this.form.industry]

this.$refs.industry.presentText=[this.form.industry]


2、赋值的数据必须与懒加载的数据转换为你props中指定的value指向字段类型一致(做的页面中有两个el-cascader控件,正好第一个控件就卡在这里了,花了大半天时间才发现是类型不一致问题引起)

3、value必须唯一,特别是前1到N-1的值必须是唯一的,比如省市县用['北京', '北京', '东城']赋值给省市县三级级联器就不能回显,但['河北', '邢台', '邢台']是可以正常回显的,也就是说倒数后两个索引值重复是可以的,但还是建议赋值最好唯一,赋值后会自动触发懒加载接口调取与数据关联的各级数据。

WX20221111-202042@2x.png

【声明】:LifeAdd生活方式登载该文章目的是为更广泛的传递行业信息,不代表赞同其观点或证实其描述,本网站亦不为其版权负责。若无意侵犯您合法权益的内容,请联系本网站,核实后将立即予以删除!

高品质生活资讯平台

『LifeAdd生活方式』是一家引领高端品质生活的互联网平台,聚焦前沿时尚风潮,为高品质人群推送生活资讯和商业信息,链接高端商业与高端人群生态圈。

业务范围

经营规则

联系我们
北京市丰台丽泽金融商务区平安幸福中心A座7层
82918700@qq.com
微信号:82918700

2013-2024 LifeAdd生活方式 www.lifeadd.cn 版权所有 | 御融(北京)科技有限公司 All Rights Reserved
增值电信业务经营许可证:京B2-20200664 | 京ICP备14004911号-7