省市级联选择器，省也能单独选中

最新推荐文章于 2025-06-24 12:38:21 发布

原创最新推荐文章于 2025-06-24 12:38:21 发布 · 509 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

elementUI

9 篇文章

订阅专栏

这篇博客展示了如何结合Vue和Element UI组件库，创建一个既能选择省份也能展开选择子项（如城市）的功能。通过el-select和el-tree组件的结合，实现了多级选择，并在节点点击时动态更新选定的区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击既可以选择省，也可以展开选中里面的子项
可以结合el-select和el-tree
在这里插入图片描述

<template>
    <div>
        <el-select v-model="params.areaScope" multiple clearable style="width: 30%">
            <el-option :value="mineStatusValue" style="height: auto">
                <el-tree :data="areaList" node-key="code" :expand-on-click-node="false" ref="tree" highlight-current :props="defaultProps" @node-click="areaClick"></el-tree>
            </el-option>
        </el-select>
    </div>
</template>

<script>
import pacCode from '@/utils/pac-code.json'
let PacObject = Object.freeze({ pacList: pacCode })
export default {
    data() {
        return {
            params: {
                areaScope: [],
            },
            mineStatusValue: '',
            areaList: PacObject.pacList,
            defaultProps: {
                children: 'children',
                label: 'name'
            },
        }
    },
    created() {

    },
    methods: {
        areaClick(obj, node, self) {
            let nameLength = obj.code.length
            if (nameLength === 2) {
                if (!this.params.areaScope.includes(obj.name)) this.params.areaScope.push(obj.name)
            }
            else if (nameLength === 4) {
                let city = node.parent.data.name + '-' + obj.name
                if (!this.params.areaScope.includes(city)) this.params.areaScope.push(city)
            }
            else {
                let city = node.parent.parent.data.name + '-' + node.parent.data.name + '-' + obj.name
                if (!this.params.areaScope.includes(city)) this.params.areaScope.push(city)
            }
        },
    }
}
</script>

pac-code.json

[{
    "code": "11",
    "name": "北京市",
    "children": [{
        "code": "1101",
        "name": "北京市",
        "children": [{
            "code": "110101",
            "name": "东城区"
        }, {
            "code": "110102",
            "name": "西城区"
        }]
    }]
}, {
    "code": "12",
    "name": "天津市",
    "children": [{
        "code": "1201",
        "name": "天津市",
        "children": [{
            "code": "120101",
            "name": "和平区"
        }, {
            "code": "120102",
            "name": "河东区"
        }]
    }]
}]