el-cascader（联机选择器）动态加载+编辑默认值回显

el-cascader（联机选择器）动态加载+编辑默认值回显
最近又在工作中遇到了一个问题，就是在我们使用el-cascader加载默认值的时候，如果我们无法拿到全部的options数据，cascader的输入框和联级选择框都会遇到回显问题（只能显示第一层的数据），这个时候我们要怎么做呢，首先我们来看一下我们想要的效果

效果展示
先来看一下效果（由于我不太会用截屏动图工具 所以分成2张）：

输入框中的回显数据

联级选择框中的已选数据

解决思路
其实cascader归根结底也就是那么几个属性的事，我们首先来看一下文档，这里列出了一些我们要用到的：

参数 说明
value / v-model 选中项绑定值
options 可选项数据源，键名可通过 Props 属性配置
lazy 是否动态加载子节点，需与 lazyLoad 方法结合使用
lazyload 加载动态数据的方法，仅在 lazy 为 true 时有效
那么首先我们来分析一下问题,问题的原因是因为我们的接口无法提供给我们完全的树形结构options数据，导致即使我们将获取到的已选数据传给v-model也加载不出来，所以我们要做的就是以下几步：

1.获取预选值
需要注意的是，我们这里获取的预选值最好是我们通过el-cascader提交时的数组数据，即每一个数据都是带有选择路径的数组，例如图中的PMO，获取的数据最好是[‘58集团’,‘技术功能平台群’,‘研发管理部’,‘PMO’],如果做不到这样的形式，那我们无论如何也要从其他接口获取到之前的路径项（不然我们就只能从最基础部分遍历获取全部的树形结构了），而后我们需要将取得的集合合并为一个路径群数组,如果和我是一样的多选联机选择框，最好在获取预选值的时候就是用promise

const queue = res.result.map(item => {
return new Promise(resolve => {
that.$axios.get('获取预选值接口').then(data => {
resolve(data.单一路径数组)
})
})
})
Promise.all(queue).then(result => {
result.forEach(i => {
that.路径群数组.push(i)
})
})
2.根据预选值制作直线结构数据的数组对象
在我们拿到了想要的数据之后，我们需要将预选值规整为一个数组，并进行去重操作

路径数组 = Array.from(new Set(that.路径群数组.flat()))
1
这样我们就得到了一个包含路径中所有项的数组，注意：如果是多选型的cascader，那么在这个数组里就会有同级若干项数据，我们不用在意，遍历数组并调用获取下层数据的接口获得下层数据res，并拼接成数组对象，这里要活用Promise，最后我们要的数据形式是（注意这里的pid是指每个数组上一层的父级id）

result = [{id: value1, Name: label1, children:res1 , pid: pid1},
{id: value2, Name: label2, children:res2 , pid: pid2},
{id: value3, Name: label3, children:res3 , pid: pid3}]
1
2
3
3.将直线结构的数组对象转换为树形结构
之后再将我们得到的数组对象转化成树形结构，网上有很多方法，这里我随便贴一个：

var data = []
this.toTree(result, data, 0)

toTree (list, data, fatherId) {
list.forEach(item => {
if (item.pid === fatherId) {
var child = {
orgName: item.orgName,
id: item.id,
children: []
}
this.toTree(list, child.children, item.id)
data.push(child)
}
})
},
这样一来我们就制作了一个包含预选项及其各个父级的树形结构

4.将树形结构赋值给options
将树形结构赋值给options，这样他就可以在最开始的文本框中加载出预选项，并且不影响其他选项动态加载的处理

Options = data
1
5.总结
最后要声明一下，完成这样效果的方法不止这一种，这是在我走了很多弯路之后做出来的，属于笨办法之一吧；
网上还有大佬说虚拟一个el-cascader的输入框，将预选值放进去，点击的时候再进行动态加载，这也是一种不错的方法；
总之我个人感觉表达的不是很清晰，不过真的尽力了，大家如果有建议或者问题请给我留言，谢谢观看

路径：

https://blog.csdn.net/yzy13521758223/article/details/108055393?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link

标签：el,预选,id,数组,cascader,默认值,我们,选择器,加载
来源： https://www.cnblogs.com/porter/p/15633019.html