用uniapp 开发省市区街道三级四级联动选择器

2023-09-25 23:03:29

省市区街道三级四级联动选择器是前端开发中经常遇到的问题，本文将使用uniapp开发省市区街道三级四级联动选择器，uniapp支持APP、H5、小程序三端，只需编写一次代码即可在三端运行。

以下为实现步骤：

创建一个uniapp项目
在项目中安装省市区街道三级四级联动选择器组件
在页面中使用省市区街道三级四级联动选择器组件
设置省市区街道三级四级联动选择器组件的属性
监听省市区街道三级四级联动选择器组件的事件
在页面中显示省市区街道三级四级联动选择器组件选择的结果

代码示例

<template>
  <view>
    <van-cascade
      v-model="value"
      :data="cascadeData"
      @change="onChange"
    />
  </view>
</template>

<script>
import { ref } from 'vue';
import VanCascade from 'vant-ui/lib/cascade';

export default {
  components: {
    VanCascade,
  },
  setup() {
    const value = ref(['330000', '330100', '330106']);
    const cascadeData = ref([
      {
        value: '330000',
        text: '浙江省',
        children: [
          {
            value: '330100',
            text: '杭州市',
            children: [
              {
                value: '330106',
                text: '西湖区',
              },
            ],
          },
        ],
      },
    ]);

    const onChange = (value) => {
      console.log(value);
    };

    return {
      value,
      cascadeData,
      onChange,
    };
  },
};
</script>