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

点击既可以选择省,也可以展开选中里面的子项
可以结合el-select和el-tree
省市级联选择器,省也能单独选中_第1张图片

<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": "河东区"
        }]
    }]
}]

你可能感兴趣的:(vue,elementUI,vue.js)