el-cascader 动态加载 回显 vue3 ts <script lang="ts" setup>

在 Vue3 中，可以使用 `<script lang="ts" setup>` 来编写组件，并使用 `ref` 来获取组件中的数据和方法。下面是 el-cascader 动态加载回显的 Vue3 + TypeScript + `<script lang="ts" setup>` 的实现方式：

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

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

interface CascaderOption {
  label: string;
  value: string;
  children?: CascaderOption[];
}

const defaultValue = ref<string[]>([]);

const options = ref<CascaderOption[]>([
  {
    label: 'Option 1',
    value: '1',
    children: []
  }
]);

const props = {
  lazy: true,
  lazyLoad: loadNode
};

function handleChange(value: string[]) {
  console.log('Selected: ', value);
}

async function loadNode(node: CascaderOption, resolve: (nodes: CascaderOption[]) => void) {
  const children = await fetchChildren(node.value);
  const options = children.map(item => {
    return {
      label: item.name,
      value: item.id,
      children: item.children ? [] : undefined
    }
  })
  resolve(options);
}

async function fetchChildren(value: string) {
  // 根据 value 的值，通过接口获取子节点数据
  const response = await fetch('url?id=' + value);
  const data = await response.json();
  return data.children;
}

onMounted(async () => {
  // 获取回显数据
  const response = await fetch('url/echo');
  const data = await response.json();
  defaultValue.value = data;
});

// 将 defaultValue、options 和 props 暴露出去，以便在模板中使用
export default {
  defaultValue,
  options,
  props,
  handleChange,
  loadNode
};
</script>

在上面的代码中，我们使用 `ref` 来定义 `defaultValue` 和 `options` 变量，分别用于存储回显数据和级联选择器的选项数据。然后，我们定义了 `loadNode` 方法，用于动态加载子节点数据，并将其作为 `lazyLoad` 属性传递给 el-cascader 组件。在 `onMounted` 钩子函数中，我们通过接口获取回显数据，并将其赋值给 `defaultValue` 变量。最后，我们将 `defaultValue`、`options` 和 `props` 暴露出去，以便在模板中使用。