The submenu of the el-cascader cascade selector is double-clicked to display the selected content

Recently encountered such a mistake, the submenu needs to be clicked twice before its value is displayed in the selector bar, and one click can get the value, but it is not displayed. The code is as follows:

It should be noted here that by binding the listening option switching event @change="handleChange" to the cascading selector, when we switch options, we can get the selected options from the first level to the following methods in this method.All value arrays of the last level,

Example: The array of cascade selectors is as follows
{
partKey:'a',
partName:'First-level equipment',
children:[
  {
PartKey:'a1',
PartName:'Secondary device 1',
},
partKey:'a2',
partName:'Secondary device 2',}
]
}

// The secondary device 2 is selected at this time

Then this.checkedAllValue=['a','a2']

// The nodeName here is the ref attribute defined in the cascade selector, and checkedValue is the method of refs itself, just use it directlythis.checkedAllValue = this.$refs["nodeName"].checkedValue;

But we only use the value of the currently selected level in the end, so it is changed to the following, Remember to define the variable in data!

this.checkedPartKey = this.$refs["nodeName"].checkedValue[1];

Then traverse the array bound by the current cascade selector in the handleChange method, and use the forEach() method to match the currently selected checkedPartKey with the partKey of each item in the array.The partName of an item is assigned to the checkedPartName defined in data, and it is assigned to partName when the form is finally submitted, so that the partName carried when sending the request is the partName value of the selected option submenu in the array of the above example.

If you don't do this, and write this.dataForm.partName as the others when sending the request, the passed value is an array. I can't remember the passed value, but it doesn't meet the requirements.

// Listen for the event that the cascading selector option changeshandleChange() {this.checkedPartKey = this.$refs["nodeName"].checkedValue[1];this.nodeNameOptions.forEach((item, index, nodeNameOptions) => {let itemArr = item.children;itemArr.forEach((item1, index, itemArr) => {if (this.checkedPartKey == item1.partKey) {this.checkedPartName = item1.partName;}});});},

-----------------------------------------------------------------------------------------------------------------------------------------

I suddenly thought that instead of defining the variable checkedPartName, you can directly make this.dataForm.partName=partName of the matching item after matching it.