更新记录

1.0.0（2025-11-17） 下载此版本

上传多级联动选择器组件

平台兼容性

uni-app(3.6.14)

插件使用

<button type="primary" @click="btnClick">打开五级联动选择器</button>
<LinkedSelect 
     ref='LinkedSelect' 
     @LinkedSelect="LinkedSelect" 
     :defaultValue="defaultSelected" 
     :treeData="treeData">
</LinkedSelect>
<view>选择的内容是----</view>
<view>{{ selectName }}</view>

插件引入

<script>
import LinkedSelect from './LinkedSelect.vue';
export default {
    data() {
        return {
            selectName: "",
            defaultSelected: {
                selectedNode: { id: 31115, name: '冼村街道' },
                selectedPath: [
                    { id: 3, name: '华南地区' },
                    { id: 31, name: '广东省' },
                    { id: 311, name: '广州市' },
                    { id: 3111, name: '天河区' },
                    { id: 31115, name: '冼村街道' }
                ],
                fullPath: ['华南地区', '广东省', '广州市', '天河区', '冼村街道']
            },
            treeData: [
                {
                    id: 1,
                    name: '华北地区',
                    children: [
                        {
                            id: 11,
                            name: '北京市',
                            children: [
                                {
                                    id: 111,
                                    name: '市辖区',
                                    children: [
                                        {
                                            id: 1111,
                                            name: '海淀区',
                                            children: [
                                                { id: 11111, name: '中关村街道' },
                                                { id: 11112, name: '上地街道' },
                                                { id: 11113, name: '学院路街道' },
                                                { id: 11114, name: '北下关街道' },
                                                { id: 11115, name: '万柳街道' }
                                            ]
                                        },
                                        {
                                            id: 1112,
                                            name: '朝阳区',
                                            children: [
                                                { id: 11121, name: '望京街道' },
                                                { id: 11122, name: '国贸CBD' },
                                                { id: 11123, name: '三里屯街道' },
                                                { id: 11124, name: '奥运村街道' },
                                                { id: 11125, name: '大屯街道' }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            id: 12,
                            name: '天津市',
                            children: [
                                {
                                    id: 121,
                                    name: '市辖区',
                                    children: [
                                        {
                                            id: 1211,
                                            name: '和平区',
                                            children: [
                                                { id: 12111, name: '劝业场街道' },
                                                { id: 12112, name: '小白楼街道' },
                                                { id: 12113, name: '南市街道' }
                                            ]
                                        },
                                        {
                                            id: 1212,
                                            name: '南开区',
                                            children: [
                                                { id: 12121, name: '鼓楼街道' },
                                                { id: 12122, name: '万兴街道' },
                                                { id: 12123, name: '学府街道' }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 2,
                    name: '华东地区',
                    children: [
                        {
                            id: 21,
                            name: '上海市',
                            children: [
                                {
                                    id: 211,
                                    name: '市辖区',
                                    children: [
                                        {
                                            id: 2111,
                                            name: '浦东新区',
                                            children: [
                                                { id: 21111, name: '陆家嘴街道' },
                                                { id: 21112, name: '张江镇' },
                                                { id: 21113, name: '金桥镇' },
                                                { id: 21114, name: '外高桥街道' },
                                                { id: 21115, name: '三林镇' }
                                            ]
                                        },
                                        {
                                            id: 2112,
                                            name: '徐汇区',
                                            children: [
                                                { id: 21121, name: '徐家汇街道' },
                                                { id: 21122, name: '天平路街道' },
                                                { id: 21123, name: '枫林路街道' },
                                                { id: 21124, name: '斜土路街道' }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            id: 22,
                            name: '江苏省',
                            children: [
                                {
                                    id: 221,
                                    name: '南京市',
                                    children: [
                                        {
                                            id: 2211,
                                            name: '鼓楼区',
                                            children: [
                                                { id: 22111, name: '宁海路街道' },
                                                { id: 22112, name: '湖南路街道' },
                                                { id: 22113, name: '中央门街道' },
                                                { id: 22114, name: '华侨路街道' }
                                            ]
                                        },
                                        {
                                            id: 2212,
                                            name: '玄武区',
                                            children: [
                                                { id: 22121, name: '新街口街道' },
                                                { id: 22122, name: '梅园新村街道' },
                                                { id: 22123, name: '锁金村街道' }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    id: 222,
                                    name: '苏州市',
                                    children: [
                                        {
                                            id: 2221,
                                            name: '姑苏区',
                                            children: [
                                                { id: 22211, name: '观前街道' },
                                                { id: 22212, name: '平江路街道' },
                                                { id: 22213, name: '沧浪街道' }
                                            ]
                                        },
                                        {
                                            id: 2222,
                                            name: '工业园区',
                                            children: [
                                                { id: 22221, name: '娄葑街道' },
                                                { id: 22222, name: '斜塘街道' },
                                                { id: 22223, name: '唯亭街道' }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 3,
                    name: '华南地区',
                    children: [
                        {
                            id: 31,
                            name: '广东省',
                            children: [
                                {
                                    id: 311,
                                    name: '广州市',
                                    children: [
                                        {
                                            id: 3111,
                                            name: '天河区',
                                            children: [
                                                { id: 31111, name: '天河南街道' },
                                                { id: 31112, name: '林和街道' },
                                                { id: 31113, name: '石牌街道' },
                                                { id: 31114, name: '猎德街道' },
                                                { id: 31115, name: '冼村街道' }
                                            ]
                                        },
                                        {
                                            id: 3112,
                                            name: '越秀区',
                                            children: [
                                                { id: 31121, name: '北京街道' },
                                                { id: 31122, name: '人民街道' },
                                                { id: 31123, name: '光塔街道' },
                                                { id: 31124, name: '六榕街道' }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    id: 312,
                                    name: '深圳市',
                                    children: [
                                        {
                                            id: 3121,
                                            name: '南山区',
                                            children: [
                                                { id: 31211, name: '南头街道' },
                                                { id: 31212, name: '粤海街道' },
                                                { id: 31213, name: '沙河街道' },
                                                { id: 31214, name: '蛇口街道' }
                                            ]
                                        },
                                        {
                                            id: 3122,
                                            name: '福田区',
                                            children: [
                                                { id: 31221, name: '华富街道' },
                                                { id: 31222, name: '莲花街道' },
                                                { id: 31223, name: '福田街道' },
                                                { id: 31224, name: '沙头街道' }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    components: {
        LinkedSelect
    },
    methods: {
        btnClick() {
            this.$refs.LinkedSelect.show()
        },
        LinkedSelect({ fullPath, selectedNode }) {
            console.log("fullPath", fullPath);
            console.log("selectedNode", selectedNode);
            this.selectName = fullPath.join("/");
        },
    }
}
</script>

数据格式

{
    id:'',//数据ID
    name:'',//数据名称
    children:{
        id:'',
        name:'',
        children:{
            id:'',
            name:''
        }
    }
}