安裝并使用Element-UI：

1. 安裝：

    npm i element-ui -S

2. 引入 Element:
   完整引入 - 在 main.js 中寫入以下內(nèi)容：

        import Vue from 'vue';
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        import App from './App.vue';
   
        Vue.use(ElementUI);
   
        new Vue({
             el: '#app',
             render: h => h(App)
        });
   

3. 基本步驟都已經(jīng)ok,下面我們開始寫前端界面代碼:
   select.png
   上element-ui官網(wǎng)，找到選擇器select這里我們就不多說了，復(fù)制粘貼，寫css樣式就行了。粘貼完修改完之后的樣子就是這個樣子了，selent框.png

4. 使用：
   首先我們選擇之后數(shù)據(jù)才會發(fā)生改變，所以要給select綁定change事件。

vue中的應(yīng)用：

    //  里面各項值，請參考Element-UI
     <div>
        <el-select v-model="value" placeholder="請選擇省" class="sheng" @change="top">   //這個change事件是select的，不是option的，別寫在option里面
           <el-option
                v-for="item in sheng"
                :key="item.area_id"
                :label="item.area_name"
                :value="item.area_id">
           </el-option>
           </el-select>
           <br>
        <el-select v-model="value1" placeholder="請選擇市" class="shi" @change="content">
           <el-option
                v-for="item in shi.city_list"
                :key="item.area_id"   
                :label="item.area_name"
                :value="item.area_id">
           </el-option>
        </el-select>
        <el-select v-model="value2" placeholder="請選擇區(qū)" class="qu">
           <el-option
                  v-for="item in qu.county_list"
                  :key="item.area_id"
                  :label="item.area_name"
                  :value="item.area_id">
           </el-option>
        </el-select>
     </div>

3. 這個時候可以使用json數(shù)據(jù)，并找到j(luò)son數(shù)據(jù)里的數(shù)據(jù)特點；當(dāng)然也可以使用接口

    npm i axios -D

        import Axios from 'axios'
        export default {
          data() {
            return {
             sheng: [],
             value: '',
             shi: [],
             value1: '',
             qu: [],
             value2: '',
         }
        },
        methods: {
           top() {
              this.shi = this.sheng.filter(item => item.area_id  === this.value )[0]
              this.value1 = ''
              this.value2 = ''
           },
           content() {
              this.qu  = this.shi.city_list.filter(item => item.area_id === this.value1 )[0]
           },
        },
        created() {
           Axios.get(`http://m.xyucd.com:7000/address-list`).then(res => {
               let {data} = res.data
               this.sheng = data
           })
        }

4.效果圖：
sheng.png
shi.png