安装并使用Element-UI：

1. 安装：

    npm i element-ui -S

2. 引入 Element:
   完整引入 - 在 main.js 中写入以下内容：

        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. 基本步骤都已经ok,下面我们开始写前端界面代码:
   select.png
   上element-ui官网，找到选择器select这里我们就不多说了，复制粘贴，写css样式就行了。粘贴完修改完之后的样子就是这个样子了，selent框.png

4. 使用：
   首先我们选择之后数据才会发生改变，所以要给select绑定change事件。

vue中的应用：

    //  里面各项值，请参考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="请选择区" 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数据，并找到json数据里的数据特点；当然也可以使用接口

    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