el-cascader动态加载回显的解决办法

el-cascader 是一个支持级联选择的组件，可以通过动态加载来实现数据的回显。具体的解决办法如下：

1. 定义一个初始值变量，用于存储回显数据。

data() {
  return {
    defaultValue: []
  }
}

2. 在组件中使用 el-cascader，并将初始值变量作为 v-model 绑定。

<el-cascader
  v-model="defaultValue"
  :options="options"
  :props="props"
  @change="handleChange"
></el-cascader>

3. 在 mounted 钩子函数中，通过接口获取回显数据，并将其赋值给初始值变量。

mounted() {
  this.$http.get('url').then(res => {
    this.defaultValue = res.data;
  })
}

4. 在 el-cascader 的 props 中，设置 lazy 属性为 true，表示启用懒加载模式。

props: {
  lazy: true,
  lazyLoad: this.loadNode
}

5. 定义 loadNode 方法，用于动态加载数据，并返回 Promise 对象。

methods: {
  loadNode(node, resolve) {
    // 根据 node 的值，通过接口获取子节点数据
    this.$http.get('url', {params: {id: node.value}}).then(res => {
      const children = res.data;
      // 将子节点数据格式化成 el-cascader 所需的格式
      const options = children.map(item => {
        return {
          label: item.name,
          value: item.id,
          leaf: item.leaf
        }
      })
      // 将子节点数据传递给 resolve 方法，触发 el-cascader 加载子节点
      resolve(options);
    })
  }
}

通过以上步骤，就可以实现 el-cascader 动态加载回显数据的功能。