Vue和Element-UI级联下拉框异步加载数据

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="props"
    @change="handleChange"
    placeholder="请选择"
  />
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    const selectedOptions = ref([]);
    const options = ref([]);
    const props = reactive({
      label: 'label',
      value: 'value',
      children: 'children',
    });

    const loadFirstLevel = async () => {
      const res = await fetch('/api/first-level'); // 这里替换成你的API
      const data = await res.json();
      options.value = data;
    };

    const loadChildren = async (value) => {
      const res = await fetch(`/api/children?parentId=${value}`); // 这里替换成你的API
      const data = await res.json();
      const node = findNode(options.value, value);
      node.children = data;
    };

    const findNode = (arr, value) => {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].value === value) {
          return arr[i];
        }
        if (arr[i].children && arr[i].children.length > 0) {
          const node = findNode(arr[i].children, value);
          if (node) return node;
        }
      }
      return null;
    };

    const handleChange = (value) => {
      if (value.length > 1) {
        const parentId = value[value.length - 2];
        loadChildren(parentId);
      }
    };

    loadFirstLevel();

    return { selectedOptions, options, props, handleChange };
  },
};
</script>