vue3 ts 基于naive组件库生成省市区级联选择器

首先，你需要安装Naive UI组件库和Vue3。可以使用以下命令进行安装：

npm install naive-ui vue@next

然后，你需要创建一个Vue组件来实现省市区级联选择器。你可以使用Typescript编写组件。

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

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { CascaderOption } from 'naive-ui';
import { getAreasByCode } from '@/api/area';

export default defineComponent({
  name: 'AreaPicker',
  setup() {
    const value = ref<string[]>([]);
    const options = ref<CascaderOption[]>([]);
    const cascaderProps = {
      label: 'name',
      value: 'code',
      children: 'children',
      isLeaf: 'isLeaf'
    };

    const loadData = async (node: CascaderOption): Promise<void> => {
      if (node.children) {
        return;
      }
      const areas = await getAreasByCode(node.code);
      node.children = areas.map((area) => ({
        code: area.code,
        name: area.name,
        isLeaf: area.isLeaf
      }));
    };

    return {
      value,
      options,
      loadData,
      cascaderProps
    };
  }
});
</script>

在上面的代码中，我们使用了`n-cascader`组件来实现省市区级联选择器。我们可以通过`options`属性提供级联选择器的初始选项，通过`loadData`函数来动态加载下一级的选项。我们还可以通过`cascaderProps`属性来定义级联选择器中每个选项的属性名称。

最后，我们需要编写一个API函数`getAreasByCode`来获取省市区数据。在这个函数中，我们可以使用axios或其他工具来向后端请求数据。这里为了简化代码，我们直接返回了一个模拟的数据。

interface Area {
  code: string;
  name: string;
  isLeaf: boolean;
}

const areas: Area[] = [
  { code: '110000', name: '北京市', isLeaf: false },
  { code: '120000', name: '天津市', isLeaf: false },
  { code: '130000', name: '河北省', isLeaf: false }
  // ...
];

export const getAreasByCode = async (code: string): Promise<Area[]> => {
  // 在实际应用中，这里可以向后端请求数据
  // 这里只是返回一个模拟数据
  return areas.filter((area) => area.code.startsWith(code.slice(0, 2)));
};

最后，在你的Vue应用中使用这个组件。

<template>
  <div>
    <area-picker></area-picker>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import AreaPicker from '@/components/AreaPicker.vue';

export default defineComponent({
  name: 'App',
  components: {
    AreaPicker
  }
});
</script>

这样，你就可以使用基于Naive UI组件库的Vue3省市区级联选择器了！