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

如果你正在使用 Vue 3 并且使用 `<script lang="ts" setup>` 写法，你可以按照以下步骤实现 el-cascader 的动态加载回显：

1. 在 `<script setup>` 中声明需要用到的变量和函数，包括选项数据、默认选中的值、加载选项数据的函数和选项改变的事件处理函数。

<script lang="ts" setup>
import { ref } from 'vue';
import { CascaderNode, CascaderOption } from 'element-plus/lib/el-cascader';

const selectedOptions = ref<number[]>([1, 2, 3]);
const options = ref<CascaderOption[]>([]);
const loadOptions = async (selectedOptions: CascaderNode[], parentNode: CascaderNode | null): Promise<CascaderOption[]> => {
  // 根据 parentNode.value 从后端获取对应级别的选项数据，并添加到 selectedOptions 中
  // 返回一个 Promise 对象，表示异步加载完成后的选项数据数组
};
const handleCascaderChange = (selectedOptions: number[]) => {
  // 根据当前选中的值，动态加载下一级别的选项数据
  // 并更新绑定的 v-model 数据
};
</script>

2. 在模板中使用 el-cascader 组件，并绑定相关的属性和事件。

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :lazy="true"
    :lazy-load="loadOptions"
    @change="handleCascaderChange"
    ref="cascader"
  />
</template>

3. 在组件挂载后，调用组件的 `loadData` 方法加载第一级别的选项数据。

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { CascaderNode, CascaderOption } from 'element-plus/lib/el-cascader';

const selectedOptions = ref<number[]>([1, 2, 3]);
const options = ref<CascaderOption[]>([]);
const loadOptions = async (selectedOptions: CascaderNode[], parentNode: CascaderNode | null): Promise<CascaderOption[]> => {
  // 根据 parentNode.value 从后端获取对应级别的选项数据，并添加到 selectedOptions 中
  // 返回一个 Promise 对象，表示异步加载完成后的选项数据数组
};
const handleCascaderChange = (selectedOptions: number[]) => {
  // 根据当前选中的值，动态加载下一级别的选项数据
  // 并更新绑定的 v-model 数据
};

onMounted(() => {
  // 加载第一级别的选项数据
  (this.$refs.cascader as any).loadData();
});
</script>

完整的代码示例如下：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :lazy="true"
    :lazy-load="loadOptions"
    @change="handleCascaderChange"
    ref="cascader"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { CascaderNode, CascaderOption } from 'element-plus/lib/el-cascader';

const selectedOptions = ref<number[]>([1, 2, 3]);
const options = ref<CascaderOption[]>([]);
const loadOptions = async (selectedOptions: CascaderNode[], parentNode: CascaderNode | null): Promise<CascaderOption[]> => {
  // 根据 parentNode.value 从后端获取对应级别的选项数据，并添加到 selectedOptions 中
  // 返回一个 Promise 对象，表示异步加载完成后的选项数据数组
};
const handleCascaderChange = (selectedOptions: number[]) => {
  // 根据当前选中的值，动态加载下一级别的选项数据
  // 并更新绑定的 v-model 数据
};

onMounted(() => {
  // 加载第一级别的选项数据
  (this.$refs.cascader as any).loadData();
});
</script>