vue.js elementui vue项目 element-ui 级联选择器 el-cascader 回显的完美解决

1、需求

el-cascader内部是数组形式的，而后台接口只需传入数组的最后一个字段，但修改时候往往也只返回这最后一个字段，导致el-cascader无法正确回显

2、原因分析

v-model属性才是回显的关键，只有绑定了v-model属性才会让回显，而且数组中的值(即：targetViewId值)一定是最后一级的id加上它父级的id组成

3、解决方案

由于后端返回来的只有最后一级的id，所以我们需要写一个递归来拿到最后一级id和它父级id的数组。废话不多说直接上代码

* el-cascader递归获取父级id

* @param list 数据列表

* @param id 后端返回的id

* propsCascader 是el-cascader props属性

**/

getParentsById(list, id) {

for (let i in list) {

if (list[i][this.propsCascader.value || 'value'] == id) {

return [list[i][this.propsCascader.value || 'value']]

}

if (list[i].children) {

let node = this.getParentsById(list[i].children, id)

if (node !== undefined) {

// 追加父节点

node.unshift(list[i][this.propsCascader.value || 'value'])

return node

}

4、效果图

5、注意

如果直接将targetViewId赋值后台返回的最后一个id值，也能回显（最后一级没有选中），其效果如下：

6、相关文章

基于ElementUi&antdUi再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档

vue2/3集成qiankun微前端

精彩内容

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

金钥匙