位置: IT常识 - 正文
完美解决el-cascader回显失败问题(完美解决索尼电视arc无声音)
发布时间：2024-01-03推荐整理分享完美解决el-cascader回显失败问题(完美解决索尼电视arc无声音)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:完美解决怠速抖动加油就平稳,完美解决win10间歇性掉线,完美解决显卡利用率低,完美解决显卡利用率低,完美解决win10共享打印机,完美解决win10共享打印机,完美解决win10共享打印机,完美解决usb电涌15秒后关机,内容如对您有帮助，希望把文章链接给更多的朋友！
项目场景：接手了一些老项目，需要做一些日志相关的操作，从后台日志跳转到相应页面要带上原来的请求参数，涉及到一个回显问题
问题描述Element-UI的 <el-cascader /> 这个组件，赋值之后它不会回显！而且后端返回的值只有最后一级的id，可是一个劲看文档、找资料浪费大半天，所以总结了一个比较完美的办法
原因分析：value 属性才是回显的关键，只有绑定了value属性才会让 <el-cascader /> 回显（单选情况下是一维数组、多选是二维数组），而且数组中的值一定是最后一级的id加上它父级的id组成
在这里放一下模拟的数据
depart_check: [],options: [{ value: 1, label: '东南', children: [ { value: 11, label: '上海', children: [{ value: 111, label: '黄浦区' }, { value: 112, label: '静安区' }, { value: 113, label: '虹口区' }, { value: 114, label: '长宁区' }] }, { value: 12, label: '江苏', }, { value: 13, label: '浙江', } ]}, { value: 2, label: '西北', children: [{ value: 21, label: '陕西', }, { value: 22, label: '新疆维吾尔族自治区', }]}]解决方案：由于后端返回来的只有最后一级的id，所以我们需要写一个递归来拿到最后一级id和它父级id的数组 废话不多说直接上代码
/** @param list 数据列表* @param id 后端返回的id**/getParentsById(list, id) { for (let i in list) { if (list[i].value == id) { //查询到就返回该数组对象的value return [list[i].value] } if (list[i].children) { let node = this.getParentsById(list[i].children, id) if (node !== undefined) { //查询到把父节把父节点加到数组前面 node.unshift(list[i].value) return node } } }},
方法有了之后就开始解决问题
一、多选赋值回显因为多选的时候绑定的value是个二维数组 比如随便选俩，change事件拿到的值就是[[1,11,111], [1,12] ]
// 选择单位 handlechangedepatt(v) { console.log(v) this.depart_check = v },
因为后端只会返回来111、12两个值还是字符串格式"111,12"，所以处理开始
let _depart_check = data.depart_id ? data.depart_id.split(",").map(i => Number(i)) : []let _arr = []// 使用上面写的方法 getParentsById 找出父级id并组合_depart_check && _depart_check.map(i => _arr.push(this.getParentsById(this.options, i)))console.log("_arr: ",_arr)this.depart_check = _arr控制台打印拿到的_arr，完美和change事件里拿到的值是一个格式，这样回显就完成了
这里有一个小问题就是，拿到的id可能很多个，getParentsById方法只能一个一个找父级id，所以需要依次获取
二、单选赋值回显方法和多选类似，因为单选change选中的值是一位数组，比如：[ 1,11,111 ]所以当拿到后端id之后不需要太多处理，只需要根据id和数据拿到一个一维数组的数据就行了，就不多解释了
let _depart_check = data.depart_id || ""let _arr = []_arr = this.getParentsById(this.options, _depart_check )this.depart_check = _arr总结以上就是el-cascader回显失败的解决办法，可能有些小地方不够严谨，但是大问题得到了解决。
感谢getParentsById方法有参考 爱吃蛋炒饭加蛋 大哥的帖子 js递归查询id所对应的节点，查询该节点的父节点，查询该节点的所有子节点 新定义定义一个 _arr是因为直接map赋值是不生效的，这里有参考 i_am_a_div_日积月累_ 大哥的帖子 el-cascader回显失败；el-cascader回显不出来
上一篇：Win10/Win7如何彻底关闭系统进程 Win10/Win7关闭系统进程图文步骤(win7怎么删除windows.old)
下一篇：windows7旗舰版系统查看CPU处理器的方法(windows7旗舰版最新版本)
