地址三级联动 多选 （三级都多选）

1.实现效果

地址链接 ：http://advert.pro6.liuniukeji.net/home/Advert/index

html

     <div class="advFormItem">
                            <p class="formItemTiltle" style="width: 100%;">投放地址</p>
                            <div class="select-box clearfix">
                                <select class="fl" id="proSelect" v-model="selectPro" @change="onConfirm1(selectPro)">
                                    <option value="-1">省份选择</option>
                                    <option :value="index" v-for="(item,index) in dataPro" :key=index>{{item.name}}
                                    </option>

                                </select>
                                <select class="fl" id="citySelect" v-model="selectCity"
                                    @change="onConfirm2(selectCity)">
                                    <option value="-1">城市选择</option>
                                    <option :value="index" v-for="(item,index) in dataCity" :key=index>{{item.name}}
                                    </option>

                                </select>
                                <select class="fl" id="cuntrySelect" v-model="selectCunty"
                                    @change="onConfirm3(selectCunty)">
                                    <option value="-1">县区选择</option>
                                    <option :value="index" v-for="(item,index) in dataCunty" :key=index>{{item.name}}
                                    </option>
                                </select>
                            </div>
                            <div class="adv-citybox ">

                                <div class="siteItem clearfix" v-for="(item,pindex) in showData" :key="item.id">
                                    <img class="deletePro fl" src="__IMG__/icon/advTrach.png" alt=""
                                        @click="proDelete(pindex)">
                                    <p class="txtPro fl">{{item.txt}} </p>
                                    <div class="cityItem fl">
                                        <div v-for="(ite,cindex) in item.children" :key="ite.id">
                                            <div class=" clearfix">
                                                <p class="fl"> <span class="city-first">——</span> {{ite.txt}} <span
                                                        @click="cityDelete(pindex,cindex)"
                                                        style="font-size: 18px;cursor: pointer;"> × </span> </p>
                                                <p class="fl">

                                                    <span class="cunty-item" v-for="(cunty,index) in ite.children"
                                                        :key="cunty.id" @click="cuntyDelete(pindex,cindex,index)"> <span
                                                            class="cunty-first">——</span> <span
                                                            class="cunty-line">|</span>&nbsp; {{cunty.txt}}
                                                        <span style="font-size: 18px;cursor: pointer;">×</span></span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

js：

 var app = new Vue({
        el: "#vueapp",
        data: {

            selectData: [],
            aa: '123',
            dataPro: [],
            dataCity: [],
            dataCunty: [],
            proData: {
                text: "省份选择",
                id: "",
                data: []
            },
            cityData: {
                text: "城市选择",
                id: "",
                data: []
            },
            cuntyData: {
                text: "县镇选择",
                id: "",
                data: []
            },
            proNowIndex: 0,
            cityNowIndex: 0,
            showData: [],
            selectPro: '-1',
            selectCity: '-1',
            selectCunty: '-1',
            submitPro: ''

        },
        created() {
            let that = this
            $.ajax({
                url: 'http://advert.pro6.liuniukeji.net/api.php/Publics/getAreas',
                method: 'POST',
                data: {
                    pid: 0
                },
                success: function (res) {
                    that.dataPro = res.data
                }
            })
        },
        watch: {
            showData() {
                this.updataProp()
            }
        },
        methods: {
            getCity(id) {
                let that = this;
                that.selectCity = -1
                that.dataCity = [];
                that.dataCunty = [];
                that.dataCity = {
                    text: "城市选择",
                    id: "",
                    data: []
                },
                    that.cuntyData = {
                        text: "县镇选择",
                        id: "",
                        data: []
                    };

                $.ajax({
                    url: 'http://advert.pro6.liuniukeji.net/api.php/Publics/getAreas',
                    method: 'POST',
                    data: {
                        pid: id
                    },
                    success: function (res) {
                        console.log(res)

                        that.dataCity = res.data;
                    }
                })
                console.log(that.dataCity);
            },
            getCunty(id) {
                let that = this;
                that.dataCunty = [];
                that.selectCunty = -1
                that.cuntyData = {
                    text: "县镇选择",
                    id: "",
                    data: []
                };
                $.ajax({
                    url: 'http://advert.pro6.liuniukeji.net/api.php/Publics/getAreas',
                    method: 'POST',
                    data: {
                        pid: id
                    },
                    success: function (res) {
                        console.log(res)

                        that.dataCunty = res.data;
                    }
                })

            },
            onConfirm1(index) {

                this.proData.text = this.dataPro[index].name;
                this.proData.id = this.dataPro[index].id;
                this.getCity(this.proData.id);
                let data = {
                    id: this.proData.id,
                    txt: this.proData.text,
                    children: []
                };
                let message = this.seleteData(this.proData.id, this.showData);
                if (!message) {
                    this.showData.push(data);
                    this.proNowIndex = this.showData.length - 1;
                } else {
                    this.proNowIndex = message.index;
                    console.log(this.proNowIndex);
                }
            },
            onConfirm2(index) {
                this.cityData.text = this.dataCity[index].name;
                this.cityData.id = this.dataCity[index].id;
                this.getCunty(this.cityData.id);
                this.showPicker2 = false;
                let data = {
                    id: this.cityData.id,
                    txt: this.cityData.text,
                    children: []
                };
                let message = this.seleteData(
                    this.cityData.id,
                    this.showData[this.proNowIndex].children
                );
                if (!message) {
                    console.log("没有找到");
                    this.showData[this.proNowIndex].children.push(data);
                    this.cityNowIndex = this.showData[this.proNowIndex].children.length - 1;
                } else {
                    this.cityNowIndex = message.index;
                }
            },
            onConfirm3(index) {
                this.cuntyData.text = this.dataCunty[index].name;
                this.cuntyData.id = this.dataCunty[index].id;
                this.showPicker3 = false;

                let data = {
                    id: this.cuntyData.id,
                    txt: this.cuntyData.text
                };
                let message = this.seleteData(
                    this.cuntyData.id,
                    this.showData[this.proNowIndex].children[this.cityNowIndex].children
                );
                if (!message) {
                    this.showData[this.proNowIndex].children[
                        this.cityNowIndex
                    ].children.push(data);
                } else {
                    this.cityNowIndex = message.index;
                }

            },
            seleteData(id, data) {
                for (let [key, item] of new Map(data.map((item, i) => [i, item]))) {
                    if (item.id == id) {
                        return {
                            index: key,
                            state: false
                        };
                    }
                }
            },
            proDelete(index) {
                this.showData.splice(index, 1)
            },
            cityDelete(pindex, cindex) {
                this.showData[pindex].children.splice(cindex, 1)
            },
            cuntyDelete(pindex, cindex, index) {
                this.showData[pindex].children[cindex].children.splice(index, 1)
            },
            reloadSite() {
                console.log(123456)
                this.showData = []


            },
            updataProp() {
                //传递到父页面
                let proID = ''
                for (let i = 0; i < this.showData.length; i++) {
                    proID = proID + this.showData[i].id + ','
                }
                this.submitPro = proID.substring(0, proID.length - 1);
            },
        }
    })

for of 的应用
写的非常乱 记录下 以后有时间再改