uniapp 省市两级联动 u-picker (Vue3语法)

简介

本资源文件提供了一个基于Vue3语法的uniapp省市两级联动组件，使用u-picker插件实现。该组件可以帮助开发者在uniapp项目中快速实现省市两级联动的功能。

功能特点

• 省市两级联动：支持省和市的两级联动选择。
• Vue3语法：完全兼容Vue3语法，适用于最新的uniapp项目。
• 数据源灵活：支持自定义数据源，方便集成到不同的项目中。

使用方法

1. 引入插件：

    <u-picker :show="show" ref="uPicker" :columns="newList" @confirm="confirm" @change="changeHandler" @cancel="cancel" itemHeight="80"></u-picker>
   

2. 数据源配置：

    import jsonData from '@/utils/pc.json'; // 所有的地图数据
    const addressData = ref([]);
    addressData.value = jsonData;
    const cityName = ref(); // 记录市的字段
    const provinceName = ref('请选择城市'); // 记录省的字段
    const newList = ref([]); // 绑定控件数据源的字段
   

3. 页面加载时调用：

    onLoad((name) => {
        // 省的数据
        const provinceData = jsonData.map(e => { return e.name });
        // 市的数据
        const cityData = jsonData.map(e => {
            const arr = [];
            arr.push(e.children.map(c => { return c.name }));
            return arr;
        });
        const arr = [provinceData, cityData[0][0]]; // 数据的初始数据
        newList.value = arr;
    });
   

4. 点击确定按钮时的逻辑：

    const confirm = (e) => {
        province.value = e.value[0];
        city.value = e.value[1];
        show.value = false;
    };
   

5. 选择地址时的数据响应：

    const changeHandler = (e) => {
        const [columnIndex, value, values, index, picker] = e;
        if (columnIndex === 0) {
            if (!isNaN(index)) {
                const children1 = addressData.value[index].children.map(e => { return e.name });
                picker.setColumnValues(1, children1);
            }
        }
    };
   

6. 关闭窗口的方法：

    const cancel = () => {
        show.value = false;
        isRotated.value = false;
    };
   

注意事项

• 确保项目中已经安装并配置了u-picker插件。
• 数据源文件pc.json需要根据实际需求进行调整。

贡献

欢迎提交PR或Issue，帮助改进和完善该组件。

许可证

本项目遵循CC 4.0 BY-SA版权协议，转载请附上原文出处声明。

下载链接

uniapp省市两级联动u-pickerVue3语法