标签：功能 数据 res provinceList cacheProvince pc 联级 data formData

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)
            })

        },

    }

标签：功能,数据,res,provinceList,cacheProvince,pc,联级,data,formData
来源： https://blog.csdn.net/i96249264_bo/article/details/119320355

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。