vue全國省市選擇vue元件

阿新 • • 發佈：2020-08-18

沒用懂checkbox，乾脆自己定義布林值，方便資料頁面響應。

1.初始化資料格式：

2頁面樣式：

3.對應輸出的資料格式：

4.原始碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省市任意選元件vue</title>
<style>
/* 資料多的時候v-cloak的妙用，一定要將樣式載入在高階  
*/
[v-cloak]{
    display: none!important; 
}
</style>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app" v-cloak>
        <div class="tableArea">
            <div class="pro" v-for='(item,index) in areasList' :key 
='index' 
            @mouseover="mouseover(index,item)"
            @mouseleave="mouseleave(index,item)">
                <label class="provinces"  @click='clicks(item)'>
                    <span :class='{selected:item.IsCheckeds}'></span>{{item.province}}({{item.citys.length}})
                 
</label>
                <div class="citys" v-show='item.show'>
                    <p>{{item.province}}</p>
                    <label class="city" v-for='(i,s) in item.citys' :key='s' @click='click(item,s)'>
                        <span :class='{selected:i.IsChecked}'></span>{{i.city}}
                    </label>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./address.js"></script>
<script>
new Vue({
    el: '#app',
    data(){
        return{
            show:false,
            areasList:{},
            data:[]
        }
    },
    created:function(){
        let areasList = []
        for(item in areas){
            let citys = []
            let objs = {
                province:item,
                citys:item.indexOf("市") != -1?'':citys,
                show:false,
                IsCheckeds:false
            }
            for(i in areas[item]){
                let obj = {
                    city:areas[item][i],
                    IsChecked:false
                }
                citys.push(obj)
            }
            areasList.push(objs)
        }
        this.areasList = areasList
        console.log(areasList)               //處理省市資料型別
    },
    methods:{
        // 當前預設直轄市無下級選擇，無彈窗
        mouseover(index,item){
            if(item.citys.length>0){
                item.show = true
            }
        },
        mouseleave(index,item){
            if(item.citys.length>0){
                item.show = false
            }
        },
        // 點選省級按鈕時，對應所以子市級狀態響應
        clicks(item){
            item.IsCheckeds = !item.IsCheckeds
            if(item.citys){
                item.citys.forEach(element => {
                    element.IsChecked = item.IsCheckeds
                });
            }
            this.Statistics()
        },
        //點選市級按鈕時，改變數量時，對應的省的狀態與其響應
        click(item,s){
            let citys = item.citys[s]
            citys.IsChecked = !citys.IsChecked
            let arr_filter = item.citys.filter(function(element,index,self){
                return element.IsChecked==true;           // 返回市級已選的陣列
            })
            if(arr_filter.length==0){
                item.IsCheckeds = false
            }else{
                item.IsCheckeds = true
            }
            this.Statistics()
        },
        // 每次狀態的額改變觸發方法統計當前已選狀態
        Statistics(){
            let areasList = this.areasList 
            let arrData = []
            areasList.forEach(element => {
                if(element.IsCheckeds){
                    if(element.citys){
                        let citys = element.citys
                        citys.forEach( e => {
                            if(e.IsChecked){
                                let obj = {                                //每一條市級資料都作為一個單獨的物件
                                    province:element.province,   
                                    city:e.city,
                                }
                                arrData.push(obj)
                            }
                        });
                    }else{
                        let obj = {                                //直轄市級資料也作為一個單獨的物件
                            province:element.province,   
                            city:element.province,
                        }
                        arrData.push(obj)
                    }
                }
            });
            console.log(arrData)      //當前已選
        }
    }
})
</script>
</html>
<style>
.clear{
    clear:both
}
.tableArea{
    width: 800px;
    font-size: 15px;
    color: #606266;
}
.tableArea .pro, .tableArea .city{
    float: left;
    margin: 6px 16px;
}
label{
    line-height: 32px;
}
label span{
    width: 10px;
    height: 10px;
    background: #ececec;
    display: inline-block;
    border-radius: 3px;
    border:1px solid #c1bfbf
}
.selected{
    background: #409EFF;
}
.tableArea .pro{
    position: relative;
}
.citys{
    overflow: hidden;
    border: 1px solid #ececec;
    position: absolute;
    left: 0;
    width: 600px;
    z-index: 1;
    border-radius: 4px;
    color: #606266;
    background: #ffffff;
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.citys p{
    text-indent: 15px;
    color: black;
}
</style>