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()))

这样我们就得到了一个包含路径中所有项的数组，注意：如果是多选型的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}]

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

5.总结

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