点击ele的级联选择器 级联选择器的弹窗偶尔不出现

Question

触发条件: 未知 偶尔才会出现的bug 包括开发环境和生产环境 没有规律触发
一同事说是页面停留的时间久了就会出现 但是我自己电脑测试复现不了 另一个同事线上环境测了半天也没复现
触发bug的效果：
1）点击表格中的提交按钮 如图一 打开提交弹窗 如图二 点击提交弹窗中的级联选择器 发现级联选择器的箭头方向由朝下变成了朝上 但是级联选择器的弹窗不出现 图三是正确效果
2）再点级联选择器一次 箭头往下 再点一次 箭头往上 还是没有弹窗
3）关闭当前的提交弹窗后 再次点击表格中的提交按钮打开提交弹窗 点击提交弹窗中的级联选择器 级联选择器的箭头方向由朝下变成了朝上 但是级联选择器的弹窗还是不出现
图一

图二

图三

代码是
父组件（表格展示页面）

提交按钮
<el-dropdown-item @click.native="checkEditModel(row,'submit',index)">提交</el-dropdown-item>
//点击提交按钮展示审核弹窗
checkEditModel(data,type,index){
  this.$refs.MatterDetailModel.toEdit(data,type,index);
},

当前组件（提交弹窗）

html
<FormItem label="部门经理" prop="deptManager">
  <el-cascader
    style="width: 70%"
    :options="selectTree2"
    :props="defaultProps"
    size="small"
    v-model="multips"
    placeholder="请选择部门经理"
    clearable
  ></el-cascader>
</FormItem>
data和js部分
有3个数据：selectTree2、defaultProps、multips
数据一 selectTree2
data中 selectTree2: [],
methods中
toEdit(e, type, index) {
  ....
  this.getTree2();
  this.multips = [["9", "4"]];
}
// 获取部门经理
getTree2() {
  const [url, httpConfig] = [
    "/aper",
  ];
  this.$http
    .get(url, httpConfig)
    .then((data) => {
        const tree = data.data;
        this.disabledTree(tree);
        this.selectTree2 = tree
    })
    .catch((error) => {
      this.$Message.error("数据获取失败！");
    });
},
//默认值锁死
disabledTree(arr) {
  if(!Array.isArray(arr))
    return false
  arr.forEach((el) => {
    if (el.label == "综合管理部") {
      me.disabledTree(el.gzwDeptManagerList);
    } else if (el.label == "综合部部长-cm") {
      el.disabled = true;
    }
  });
},
数据二：defaultProps
data中
defaultProps: {
  value: "id",
  label: "label",
  children: "gzwDeptManagerList",
  multiple: true, //多选
  expandTrigger: "hover",
},
数据三：multips
data中 multips: [["9", "4"]],
//点击提交弹窗的取消按钮时
close(type) {
  this.modal = false;
  this.itemFillFormEdit = {};
  (this.modalTableDataEdit = []),(this.multips = [["9", "4"]]);
}

问题：不知道怎么解决这个bug 没有头绪