elementPlus是饿了么基于vue3开发的优秀控件集,但其中的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的值必须是唯一的,比如省市县用['北京', '北京', '东城']赋值给省市县三级级联器就不能回显,但['河北', '邢台', '邢台']是可以正常回显的,也就是说倒数后两个索引值重复是可以的,但还是建议赋值最好唯一,赋值后会自动触发懒加载接口调取与数据关联的各级数据。
2013-2024 LifeAdd生活方式 www.lifeadd.cn 版权所有 | 御融(北京)科技有限公司 All Rights
Reserved
增值电信业务经营许可证:京B2-20200664 | 京ICP备14004911号-7