ElementUI's cascader cascade selection control uses mining pits: Set the default value to echo the problem solution (personal test works!)

For more articles, please follow my personal blog: https://seven777777.github.io/myblog/

Record a problem you just encountered and how to solve it. Hope this helps anyone who encounters the same problem in the future!

Problem Description

When using elementui's cascading selection control and needing to set a default value and modify the default value, a problem is found:

First post the relevant core code as follows:

<el-cascader
    ref="locationCascader"
    v-model="location"
    placeholder="省份/城市/区域"
    :options="cityRegionObj">
</el-cascader>

data(){
    return {
        location:[]
    }
}

1. Set the default value for the first time. At this time, the value of location is ['Hubei Province', 'Wuhan', 'East Lake High-tech']

You can see that there is no problem with the first loading display.

2. Set the value of location to [] again

At this time, the value of the control drop-down still retains the last value.

Resolution process

The first thing that comes to mind is to look in the official API to see if there are any attributes and methods that I haven't noticed.

After some searching, I found the following method:

Then when I went to practice with full confidence, I found an error.

This road didn't work, so I could only continue to search for solutions online, and I also saw some proposed solutions, including modifying the source code, etc. I tried several, but to no avail.

Finally found the solution here ☞ https://github.com/ElemeFE/element/issues/18669 !

Solution

methods:{
    <!--重新赋值前先调用此方法-->
    <!--this.$refs.locationCascader：这个值基于你之前在dom上定义的ref-->
    resetCasadeSelector() {
        if (this.$refs.locationCascader) {
            this.$refs.locationCascader.$refs.panel.activePath = []
            this.$refs.locationCascader.$refs.panel.calculateCheckedNodePaths()
        }
    }
}

It has been tested by myself and it works. If there are other effective methods, please leave a message to exchange!

Welcome to pay attention to my personal public account [搴Fang Shimeng]