Vue使用Cascader级联选择器数据回显会遇到哪些问题-创新互联

Vue使用Cascader级联选择器数据回显会遇到哪些问题？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

使用Cascader级联选择器过程中主要存在的应用问题如下：

1、由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显，如何自动全部加载已选择类目的相关节点数据；

2、提前加载数据后，点击相应父级节点出现数据重复等；

3、使用多个数据源相同的级联选择器，产生只能成功响应一个加载子级节点数据；

4、Vue中级联选择器相应数据完成加载，依然无法回显。

解决思路

Cascader级联选择器在需要回显的节点数据都存在的情况下，方可完成回显，首先想到的是把选中节点相关的数据全部获取到即可，遍历已选择的节点数据，遍历加载相对应的数据。（如果多个级联选择器使用同一个数据源，使用深拷贝将数据分开，避免产生影响）

由于是级联的数据懒加载，需要每一级相应的节点数据加载完进行下一步，故使用ES6中的Promise，将子级节点数据加载封装成一个Promise，待Promise执行完成，对列表数据遍历获取完成后返回即可。

getChildrenList (fid, level = 0) {
 return new Promise((resolve, reject) => {
 API.getCategory({ fid: fid, level: level }).then(
  res => {
  if (res) {
  if (res.code === 0 && res.result) {
  resolve(res.result)
  }
  }
  }
 )
 })
 },
let twolist = this.getChildrenList(codeArr[0], 1)
let thirdlist = this.getChildrenList(codeArr[1], 2)
Promise.all([twolist, thirdlist]).then((data) => {
 ...
})