用vue，Element-UI，Axios实现简单的三级联动

安装并使用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
     

           //这个change事件是select的，不是option的，别写在option里面
           
           
           
           

        
           
           
        
        
           
           
        
     

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