ElementUi中Cascader级联选择器回调问题解决

偏执的太偏执、 2023-07-21 12:30 40阅读 0赞

ElementUi中Cascader级联选择器 回调问题解决  
1，在开发中使用了Cascader级联选择器，应用于省市联动的效果，发现问题：数据回调时不显示。  
2，解决方法：使用ref进行回调处理。

this.$refs.cityShow.presentText ="复制";// 首次手动复制

关键词是“presentText”

详细问题描述：  
Cascader级联选择器中使用的是props进行的省市联动效果，而没有使用options 进行传值；

主要代码如下：

<el-cascader ref="cityShow" :props="props" placeholder="请选择城市" v-model="job.userAddress.selectedCity" :show-all-levels="true" clearable></el-cascader>
    //data中props如下
    props: {
                    lazy: true,
                    lazyLoad: (node, resolve) => {
                        const { level, value } = node;
                        if (level === 0) {
                            this.getProvince(resolve);
                        } else if (level === 1) {
                            this.getCity(value, resolve)
                        }
                    }
                },
             
    方法如下：
     getProvince(resolve) {
                this.$http.getProvince((res) => {
                    console.log("555", res)
                    if(res.code === 0 && res.data && res.data.provinceArray) {
                        const provinceList = res.data.provinceArray.map(item => ({
                            value: item,
                            label: item.provinceName,
                            leaf: false,
                        }))
                        resolve && resolve(provinceList)
                    }
                })
            },
            getCity(data, resolve) {
                this.$http.getCity({ provinceId: data.provinceCode }, (res) => {
                    if(res.code === 0 && res.data && res.data.cityArray) {
                        const cityList = res.data.cityArray.map(item => ({
                            value: item,
                            label: item.cityName,
                            leaf: true,
                        }))
                        resolve && resolve(cityList)
                    }
                    console.log("666", res)
                })
            },

解决方案  
在mounted中或者 watch处理

mounted() {
            setTimeout(()=>{
                this.$refs.cityShow.presentText = this.companyInfo.provinceName +"/" + this.companyInfo.cityName;// 首次手动复制
                this.$refs.areaShow.value = this.companyInfo.regionName;
            },1000)
        },

watch:{
            selectCity(arr){
                //处理回显问题
                setTimeout(()=>{
                    this.$refs.cityShow.presentText = arr[0].provinceName +"/" + arr[1].cityName;// 首次手动复制
                },1000)
            }
        },
        computed: {
            //工作地点回显问题
            selectCity(){
                return this.job.userAddress.selectedCity;
            },
            }