Vue------实现省市区三级联动

发布时间：2024-07-09 09:01

本篇将用，vue框架实现省市区三级联动

一、思路

三个下拉框，分别代表省、市、区

下面的任务就是，分别绑定省、市、区三个下拉框：

点击省会出现所有的省份

点击对应的省份，市下拉框会对应出现对应的市

点击市会出现所有的市

点击对应的市，区下拉框会对应出现对应的区。

依次可以实现省市区三级联动。

二、vue主体实现

如下面代码所示

<body>

<div id="app">


    <div>
        <span>省</span>
        <select v-model="pro">
            <option :value="p.adcode" v-for="p in list">{{p.name}}</option>
        </select>

        <span>市</span>
        <select v-model="city">
            <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts">
                {{item.name}}
            </option>
        </select>


        <span>区</span>
        <select v-model="county">
            <option :value="item.adcode"
                    v-for="(item,index) in list.find(c=>c.adcode==pro).districts.find(x=>x.adcode==city).districts">
                {{item.name}}
            </option>
        </select>


    </div>


</div>

<script>
    new Vue({
        el: "#app",
        data: {
            pro: "110000",
            city: "",
            county: "",
            list: citys
        },
    })

</script>
</body>

三、完善代码（联动）

要想实现省市区三级联动

对省、市进行监控，对应的数据改变，就改变对应的省市县，以此来完成省市县三级联动

完善后的 Vue 如下

   new Vue({
        el: "#app",
        data: {
            pro: "110000",
            city: "",
            county: "",
            list: citys
        },
        methods: {
            loadCity(proCode) {
                let $citys = this.list.find(s => s.adcode == proCode).districts[0];
                if ($citys != null) {
                    this.city = $citys.adcode;
                }
            },
            loadCounty(proCode, cityCode) {
                let $county = this.list.find(s => s.adcode == proCode).districts.find(x => x.adcode == cityCode).districts[0];
                if ($county != null) {
                    this.county = $county.adcode;
                }
            }
        },
        created() {
            this.loadCity(this.pro);
            this.loadCounty(this.pro, this.city);
        },
        watch: {
            pro: function (newVal, oldVal) {
                this.loadCity(newVal);
            },
            city: function (newVal, oldVal) {
                this.loadCounty(this.pro, this.city);
            }
        },
    })

四、全部代码

html部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/citys.js"></script>
    <script>
        console.log(citys)
    </script>
    <style>
        select{
            width: 188px;
            height: 20px;
            text-align: center;
            border-radius: 20px;
        }

    </style>

</head>
<body>

<div id="app">


    <div>
        <span>省</span>
        <select v-model="pro">
            <option :value="p.adcode" v-for="p in list">{{p.name}}</option>
        </select>

        <span>市</span>
        <select v-model="city">
            <option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts">
                {{item.name}}
            </option>
        </select>


        <span>区</span>
        <select v-model="county">
            <option :value="item.adcode"
                    v-for="(item,index) in list.find(c=>c.adcode==pro).districts.find(x=>x.adcode==city).districts">
                {{item.name}}
            </option>
        </select>


    </div>


</div>

<script>
    new Vue({
        el: "#app",
        data: {
            pro: "110000",
            city: "",
            county: "",
            list: citys
        },
        methods: {
            loadCity(proCode) {
                let $citys = this.list.find(s => s.adcode == proCode).districts[0];
                if ($citys != null) {
                    this.city = $citys.adcode;
                }
            },
            loadCounty(proCode, cityCode) {
                let $county = this.list.find(s => s.adcode == proCode).districts.find(x => x.adcode == cityCode).districts[0];
                if ($county != null) {
                    this.county = $county.adcode;
                }
            }
        },
        created() {
            this.loadCity(this.pro);
            this.loadCounty(this.pro, this.city);
        },
        watch: {
            pro: function (newVal, oldVal) {
                this.loadCity(newVal);
            },
            city: function (newVal, oldVal) {
                this.loadCounty(this.pro, this.city);
            }
        },
    })

</script>
</body>
</html>

js部分 ( 私聊作者获取 )

Vue------实现省市区三级联动

一、思路

二、vue主体实现

三、完善代码（联动）

四、全部代码

相关推荐