el-cascader级联选择器的子菜单双击两次才显示被选中的内容

最近碰到这样一个错误,子菜单要点击两次,它的值才显示在选择器栏中,点击一次能获取到值,但是就是不显示.代码如下:

这里需要注意,通过给级联选择器绑定的监听选项切换事件@change="handleChange",我们切换选项的时候,可以在这个方法中通过以下方式来获取到选中选项从一级到最末级的所有的value值数组,

举例:级联选择器的数组如下
  {
  partKey:'a',
  partName:'一级设备',
  children:[
    {
       partKey:'a1',
       partName:'二级设备1',
    },
    { 
      partKey:'a2',
      partName:'二级设备2',}
    ]
}

// 此时加入选中的是二级设备2

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

// 这里的nodeName是级联选择器中定义的ref属性,checkedValue是refs自身的方法,直接用就行
this.checkedAllValue = this.$refs["nodeName"].checkedValue;

但是我们最终用到的只有当前选中的那一级的值 ,就修改成下面这样,变量记得在data中定义一下哈!

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

然后在handleChange方法中对当前级联选择器绑定的数组进行遍历,使用forEach()方法,将当前选中的 checkedPartKey与数组中每一项的partKey进行匹配,相同时,就把当前这一项的partName赋给在data中定义的checkedPartName,最后提交表单的时候就把他赋给partName,这样发送请求时携带的partName就是上面举例的数组中被选中选项子菜单的partName值了

如果不这样操作,发送请求时和其他的一样写成this.dataForm.partName的话,传过去的值是一个数组,传过去的值我记不太清了,反正是不符合要求的

// 监听级联选择器选项发生变化的事件
    handleChange() {
      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;
          }
        });
      });
    },

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

我忽然想到,不用定义checkedPartName这个变量,你在匹配到以后,直接让this.dataForm.partName=匹配项的partName应该也可以吧