如何使用vue和element ui实现多级联动

1. 下拉框数据

<el-form-item label="省" prop="province">
     <el-select v-model="params.province" 
     placeholder="请选择省" 
     @change="changeProvice($event)" 
     clearable>
       <el-option v-for="item in provinces" 
       :key="item.id" 
       :label="item.name" 
       :value="item.id" />
     </el-select>
   </el-form-item>


   <el-form-item label="市" prop="city">
     <el-select v-model="params.city" 
     placeholder="请选择市" 
     @change="changeCity($event)">
       <el-option v-for="item in citys" 
       :key="item.id" 
       :label="item.name" 
       :value="item.id" />
     </el-select>
   </el-form-item>


   <el-form-item label="区" prop="area">
     <el-select v-model="params.area" 
     placeholder="请选择区" 
     @change="changeArea($event)">
       <el-option v-for="item in areas" 
       :key="item.id" 
       :label="item.name" 
       :value="item.id" />
     </el-select>
   </el-form-item>

2. 获取value值 实现联动效果

  
 <script>
     
     import {getProvince, getCitys, getAreas} from "@/xx/xxx/xxx";
     
     export default {

       data() {
         return {
           // 省
           provinces: [],
           // 市
           citys: [],
           // 区
           areas: [],

           params: {
             province: undefined,
             city: undefined,
             area: undefined,
           }
         };
       },

       created() {
         this.initProvice();
       },


       methods: {

         initProvice() {
           getProvince().then(res => {
             console.log(res);
             this.provinces = res.data;
           })
         },

         // 省
         changeProvice(event) {
           getCitys(event).then(res => {
             console.log(res);
             this.citys = res.data;
           })
         },

         // 市
         changeArea(event) {
           getAreas(event).then(res => {
             console.log(res);
             this.areas = res.data;
           })
         },
       }
     };
   </script>