el-cascader懒加载回显代码

以下是一个示例代码，演示了如何在 el-cascader 组件中实现懒加载和回显功能：

<template>
  <div>
    <el-cascader
      v-model="selectedOptions"
      :options="options"
      :load-data="lazyLoadData"
      :props="props"
      :value-key="'value'"
      :show-all-levels="false"
      clearable
      @change="handleCascaderChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于回显选中的值
      options: [], // cascader 数据源
      props: {
        value: "value",
        label: "label",
        children: "children",
      },
    };
  },
  methods: {
    lazyLoadData(node, resolve) {
      // 模拟异步加载数据
      setTimeout(() => {
        const childOptions = [
          { value: "child1", label: "Child 1" },
          { value: "child2", label: "Child 2" },
          { value: "child3", label: "Child 3" },
        ];
        resolve(childOptions);
      }, 1000);
    },
    handleCascaderChange(value) {
      console.log("Selected Value: ", value); // 在控制台打印选中的值
    },
  },
};
</script>

在上面的代码中，`lazyLoadData` 方法模拟了异步加载数据的过程，并通过 `resolve` 参数返回加载的子级选项。`handleCascaderChange` 方法用于处理选中值的变化，在控制台打印选中的值。

请注意，上面的代码只提供了一个基本的示例，你可能需要根据自己的需求进行相应的调整和扩展。