vue+省市区三级

最新推荐文章于 2024-09-10 13:47:16 发布

2301_78278751

最新推荐文章于 2024-09-10 13:47:16 发布

阅读量547

点赞数 11

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/2301_78278751/article/details/140740255

版权

1.在项目中安装element省市区数据插件;

npm install element-china-area-data -S

2.在vue的顶部进行导入

import {regionData,codeToText} from "element-china-area-data"; //codeToText是将默认输出的区域编码转为汉字 例如codeToText[selectArea];

1. provinceAndCityData 是省市两级联动数据且不带 "全部" 字样选项。

2. provinceAndCityDataPlus 是省市两级联动数据且显示 "全部" 字样选项。

3. regionData 是省市区三级联动数据且不带 "全部" 字样选项。

4. regionDataPlus 是省市区三级联动数据且显示 "全部" 字样选项。

代码:

<el-form >
    <el-form-item label="所属地区" :label-width="formLabelWidth" class="a4">
        <el-select
                v-model="selectProvince"
                placeholder="请选择省"
                style="width: 145px">
            <el-option
                    v-for="item in provinces"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="changeProvince()"
            >
            </el-option>
        </el-select>
        <el-select
                v-model="selectCity"
                placeholder="请选择市"
                style="width: 145px"
        >
            <el-option
                    v-for="item in cities"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @click.native="changeCity"
            >
            </el-option>
        </el-select>
        <el-select
                v-model="selectArea"
                placeholder="请选择区"
                style="width: 145px"
        >
            <el-option
                    v-for="item in area"
                    size="small"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            >
            </el-option>
        </el-select>
    </el-form-item>
</el-form>

data(){

return{

provinces: regionData, 
 value: '', 
 cities: [],
 area: [],
 selectProvince: "", 
selectCity: "", 
selectArea: "",
 //上述属性省市区下拉框位置

}

methods: {
    handleClick(row) {
        console.log(row);
    },
    //三级联动省市区功能
    changeProvince() {
        this.cities = [];
        this.area = [];
        this.selectCity = "";
        this.selectArea = "";
        let cityItem = this.provinces.filter(
            (item) => item.value === this.selectProvince
        );
        if (cityItem[0]) {
            this.cities = cityItem[0].children;
        }
    },
    changeCity() 
        this.area = [];
        this.selectArea = "";
        let areaItem = this.cities.filter(
            (item) => item.value === this.selectCity
        );
        if (areaItem[0]) {
            this.area = areaItem[0].children;
        }
    },

}