Elementui 三级下拉联动

最新推荐文章于 2024-09-24 08:37:02 发布
爱编码的波哥
最新推荐文章于 2024-09-24 08:37:02 发布
阅读量650
点赞数 1
分类专栏： Vue
本文链接：https://blog.csdn.net/qq_25128693/article/details/103575914
版权
Vue 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-select v-model="linkAge.provinceName" @change="choseProvince" placeholder="省级地区">
            <el-option v-for="(item,$index) in province" :key="$index" :label="item.value" :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="linkAge.cityName" @change="choseCity" placeholder="市级地区">
            <el-option v-for="(item,$index) in city" :key="$index" :label="item.value" :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="linkAge.blockName" @change="choseBlock" placeholder="区级地区">
            <el-option v-for="(item,$index) in block" :key="$index" :label="item.value" :value="item.value">
            </el-option>
        </el-select>
        <el-button type="primary" @click="getData()">获取对象数据 在控制台查看</el-button>
    </div>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>

        //模拟数据
        const ChineseDistricts = [{
            code: "001",
            name: "北京",
            cityList: [
                {
                    code: "001001",
                    name: "西城区",
                    areaList: [
                        {
                            code: "001001001",
                            name: "西城区瓜子哥"
                        },
                        {
                            code: "001001002",
                            name: "西城区瓜子哥2"
                        }
                    ]
                },
                {
                    code: "001002",
                    name: "东城区",
                    areaList: [
                        {
                            code: "001002001",
                            name: "东城区瓜子哥"
                        },
                        {
                            code: "001002002",
                            name: "东城区瓜子哥2"
                        }
                    ]
                }
            ]
        },
        {
            code: "002",
            name: "深圳",
            cityList: [
                {
                    code: "002001",
                    name: "龙岗区",
                    areaList: [
                        {
                            code: "002001001",
                            name: "龙岗区瓜子哥"
                        },
                        {
                            code: "002001002",
                            name: "龙岗区瓜子哥2"
                        }
                    ]
                },
                {
                    code: "002002",
                    name: "福田区",
                    areaList: [
                        {
                            code: "002002001",
                            name: "福田区瓜子哥"
                        },
                        {
                            code: "002002002",
                            name: "福田区瓜子哥2"
                        }
                    ]
                }
            ]
        }
        ]

        new Vue({
            el: '#app',
            data() {
                return {
                    ChineseDistricts: ChineseDistricts,
                    //绑定三级联动下拉的模型
                    province: [],
                    city: [],
                    block: [],
                    //临时数据存储
                    cityList: [],
                    blockList: [],
                    //三级联动的对象 最后选中的结果集合
                    linkAge: {
                        provinceName: '',//省的名字
                        cityName: '',//市的名字
                        blockName: ''  //区的名字
                    }
                }
            },
            methods: {
                // 加载china地点数据，三级
                getCityData: function () {
                    let that = this;
                    that.ChineseDistricts.forEach(function (item, index) {
                        //省级数据
                        that.province.push({ id: item.code, value: item.name, children: item.cityList })
                    })
                },
                // 选省
                choseProvince: function (e) {
                    let that = this;
                    //重置数据
                    that.city = [];
                    that.block = [];
                    that.linkAge.cityName = '';
                    that.linkAge.blockName = '';
                    for (var index in that.province) {
                        if (e === that.province[index].id) {
                            that.cityList = that.province[index].children
                            that.linkAge.provinceName = that.province[index].value
                            that.cityList.forEach(function (item, cindex) {
                                that.city.push({ id: item.code, value: item.name, children: item.areaList })
                            })
                        }
                    }
                },
                // 选市
                choseCity: function (e) {
                    let that = this;
                    that.block = [];
                    that.linkAge.blockName = '';
                    for (var index in that.city) {
                        if (e === that.city[index].id) {
                            that.blockList = that.city[index].children
                            that.linkAge.cityName = that.city[index].value
                            that.E = that.blockList[0].id
                            that.blockList.forEach(function (item, bindex) {
                                that.block.push({ id: item.code, value: item.name, children: [] })
                            })
                        }
                    }
                },
                // 选区
                choseBlock: function (e) {
                    this.linkAge.blockName = e;
                },
                getData: function () {
                    console.log(this.linkAge)
                }
            },
            created: function () {
                this.getCityData()
            }
        })
    </script>
</body>

</html>