一、导入uni-data-picker插件

uni-data-picker 数据驱动的picker选择器

单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景 

二、省市县数据导入项目

附：省市区三级联动数据

uni-appuni-data-picker省市区数据表-Javascript文档类资源-CSDN下载<uni-data-picker>是一个选择类datacom组件。支持多列级联选择。列更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq_34707272/85657925三、使用示例

<template>
  <view>
    <uni-data-picker
      v-slot="{data, error}"
      v-model="userArea"
      :localdata="aCityData"
      popup-title="请选择所在地区"
    >
      <view
        v-if="error"
        class="error"
      >
        <text class="l-list-text">{{ error }}</text>
      </view>
      <view
        v-else-if="data.length"
        class="selected"
      >
        <view
          v-for="(item,index) in data"
          :key="index"
          class="selected-item"
        >
          <text>{{ item.text }}</text>
        </view>
      </view>
      <view v-else>
        <text class="l-list-text">请选择</text>
      </view>
    </uni-data-picker>
  </view>
</template>

<script>
// 导入省市区json数据
// 根据自己的需求导入
import aCityData from "../../utils/json/city-china.json";

export default {
  name: "InfoFill",

  data() {
    return {
      aCityData,
      userArea: ""
    };
  },

  methods: {}
};
</script>

四、效果