Naive UI Cascader 如何动态加载子级数据？

上官鑫鑫提问于 2026-03-23 00:33:19 阅读 13

组件

我用 Naive UI 的 Cascader 做省市区选择，但不想一次性加载全部数据。试了 on-update:value 和 onLoad，但文档里没找到类似 Ant Design 的 loadData 方法。现在点开省级选项时，市级选项是空的，不知道该怎么触发异步加载下一级。

我目前的代码大概是这样：

<template>
  <n-cascader
    v-model:value="selectedValue"
    :options="options"
    :load-data="loadData"
  />
</template>

<script setup>
const options = ref([{ label: '北京市', value: '110000' }]);
const loadData = async (option) => {
  // 这里想根据 option.value 请求市级数据，但没生效
};
</script>

我来解答赞 3 收藏

反馈

1 条解答

♫红凤 Lv1

问题应该出在 loadData 方法的实现上。Naive UI 的 Cascader 组件确实提供了 loadData 属性来处理异步加载，但是需要确保这个方法能够正确地返回一个 Promise，并且更新选项的数据结构。

你在 loadData 方法里面请求了市级数据，但没有将新获取的数据添加到当前选项的 children 中。你需要手动将新获取的数据挂载到当前选项上，这样 Cascader 才知道去渲染新的子节点。

可以尝试这样改一下你的 loadData 方法：

const loadData = async (option) => {

  if (option.children) return; // 如果已经有 children 数据，则不再加载



  // 模拟异步请求

  const loadOptions = await new Promise((resolve) => {

    setTimeout(() => {

      resolve([

        { label: '市辖区', value: '110100' },

        // 其他市级选项...

      ]);

    }, 1000);

  });



  // 将获取到的市级选项添加到当前省级选项的 children 中

  option.children = loadOptions;

};

这样，当你展开省级选项时，loadData 会被调用，然后模拟请求市级数据并将其赋值给省级选项的 children 属性，从而实现动态加载的效果。

2026-03-23 01:00