ElementUi中Cascader级联选择器回调问题解决-蒲公英云

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

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;
        },
        }