基於element ui封裝的省市區三級聯動

工做中總會遇到些頭疼的事，例如想在elememt ui中找個三級聯動，結果發現沒有，因而本身封裝了一個。具體代碼以下：

<template>
    <div>
          <p>
            <el-select select v-model="sheng" placeholder = "請選擇">
                <el-option v-for="item in allsheng" :value="item" :key = "item">{{item}}</el-option>
            </el-select>
            省
            <el-select v-model="shi" placeholder = "請選擇" ref = "shi">
                <el-option v-for="item in allshi" :value="item" :key = "item">{{item}}</el-option>
            </el-select>
            市
            <el-select v-model="xian" placeholder = "請選擇">
                <el-option v-for="item in allxian" :value = "item" :key = "item">{{item}}</el-option>
            </el-select>
            區

        </p>
        </div>
</template>
<script>
    export default{
        data(){
            return {

                sheng : "",
                shi : "",
                xian : ""

            }
        },
        computed : {
            allsheng(){
                console.log(this.sheng)
                    return citydata.map(item=>item.name);
                },
                allshi(){
                    console.log(this.shi)
                  if(this.sheng==''){
                    this.shi=''
                  }else{
                    return citydata.filter(item=>item.name == this.sheng)[0].city.map(item=>item.name);
                  }

                },
                allxian(){
                  console.log(this.xian)
                  if(this.sheng==''){
                    this.xian=''
                  }else{
                    var thecity = citydata.filter(item=>item.name == this.sheng)[0].city.filter(item=>item.name == this.shi)[0];
                    if(thecity){
                      return thecity.area;
                    }
                    return [];
                  }

                }
            },
         watch : {
                sheng(){
                    this.shi = "";
                    this.xian = "";
                },
                shi(){
                    this.xian ="";
                }
            }
    }
</script>

city.js是省市區的json（從某網站上拔下來的，具體就不提供了），我在index.html中引入的

裏面是這樣子滴：

我這是在vue項目中用的，全部封裝成了組件，但願對你有所幫助