pc端实现联级选择功能

1、联级选择

描述：选择省后，市的数据才回出现，不选择省，市的数据就为空

（2）api接口如下，通过pcod参数就能查找市的数据

实现：

思路：1、在选择框中绑定change事件，用来做连级的事件；2、在mounted中调用接口，获取省的所有数据，然后渲染到页面上；3、在change事件的函数中，调用原来获取省数据的接口，然后传入pcode参数来获取对应的市的数据

<table>
                <tr v-for="(item,index) in list" :key="index">
                    <td>
                        <el-select v-model="formData.province" 
                        @change="provinceChange"
                         clearable
                        placeholder="请选择省" 
                        style="margin-right:5px;"
                        >
                            <el-option
                             v-for="item in provinceList"
                             :key="item.areaCode"
                             :label="item.name"
                             :value="item.areaCode">
                        </el-option>
                        </el-select>
                         <el-select 
                            v-model="formDatacity.city" 
                            placeholder="请选择市" 
                            style="margin-right:5px;"
                              clearable>
                            <el-option
                            v-for="item in cityList"
                             :key="item.areaCode"
                             :label="item.name"
                             :value="item.areaCode"
                            >
                            </el-option>
                        </el-select>
                        <span class="buttonspan" @click="del(index)">-</span>
                    </td>

                </tr>

            </table>

js部分

//data中的数据
data() {
        return {
        //省份数据
        formData:{
            province:'',//省
            city:'',//市
            shortName:'',
            areaCode:'',
       },
       //存放市数据
       formDatacity:{
        areaCode: '',
        cityCode: "",
        id: '',
        lat: "",
        level: 1,
        lng: "",
        mergerName: "",
        name: "",
        parentCode: '',
        pinyin: "",
        shortName: "",
        zipCode: ''
       },
     

       provinceList: [],
       cityList:null,
        value1 : "",
        label1:"",
      
        //
        cityList: [],
        value2 : "",
        label2:"",
        list:[
                {
                   provinceList: [],
                   city: []
                }
            ],
        }
    },
    mounted(){
        
        this.getProvince();
        
    },
     methods:{
        //获取市数据
        getProvince() {
        // 如果本地有省份数据缓存就取缓存，没有则调接口
            const cacheProvince = sessionStorage.getItem('cacheProvince');
            if (cacheProvince) {
                this.provinceList = JSON.parse(cacheProvince)
            } else {
                this.$axios(urlObj.searchLocation).then(res => {
                   if (res.code) return
                    this.provinceList = res.data
                    this.formData = res

                sessionStorage.setItem('cacheProvince', JSON.stringify(res.data))
                })
            }
            
        },
        // 选择省份之后请求市数据   
        provinceChange(){
            const params = {
                "pcode":this.formData.province
            }
            this.$axios(urlObj.searchLocation,params).then(res => {
                this.cityList = res.data
                console.log(this.formDatacity)
            })

        },

    }