cascader遇到的坑（点击选中时，弹框不关闭；选择的内容回显是radio不显示选中状态；要求点击文字也可选择；）

测试提了个bug，选择目录后选择框不自动关闭

 

 

点击了一下确实如此

 

 这里我使用的是 elementUi 的 cascader 具体代码如下：

<el-cascader
    ref="catalogue"
    v-model="exportForm.directIds"
    :options="catalogueList"
    :props="{value: 'id', label: 'directoryName', children: 'childDirectory', checkStrictly: true}"
    @change="handleExportCatalogChange"
  />
  
  methods: {
    handleExportCatalogChange(val) {
      this.exportForm.directIds = val[val.length - 1]
      this.$refs.catalogue.dropDownVisible = false
    },
  }

解决过程：

经过我不懈的找度娘，给出的方案大多数都是设置cascader 的 dropDownVisible 为 false，这不简单，赶紧上手，在 cascader 的change事件中修改了 dropDownVisible的值，满心欢喜的打开了页面，结果往往不如意，哎嘿，果然，没解决

 

在度娘的帮助下又试了几种方案还是不行，问题到底出在哪里，咱必须得冷静

首先打印了一下 this.$refs.catalogue的值，它的 dropDownVisible 的值是 false 了呀，为什么没关闭呢，然后在当前页面全局搜索了一下 catalogue,果然，我是个菜鸟，原来有另一个cascader的 ref值也是 catalogue,修改名称后，成功解决。

 

 

但这是点击关闭选择框会和后面展示次级菜单的事件冲突，我们需要将出发次级菜单的事件设置为hover,通过设置props里的 expandTrigger: 'hover'成功解决

还沉浸在成功的喜悦中时，点了点又发现了另外一个问题， 选中之后再次打卡下拉框之后有时候会出现 radio原点未选中的情况！！！！这。。。

 

 

经过九九八十一难的排查，发现 在 cascader 的 change 事件中修改了 cascader 绑定的值

handleExportCatalogChange(val) {
    this.form.directId = val[val.length - 1]
    this.$refs.catalogue.dropDownVisible = false
    // this.$refs.catalogue._data.dropDownVisible = false
    // this.$refs.catalogue.toggleDropDownVisible()
}

哎，经过这次，劝告家人们：代码一定要规范啊，代码不规范，家人两行泪啊

 

 

总结：

遇到的问题：

1、cascader 选中选项之后不关闭

2、选中之后再次打卡下拉框之后有时候会出现 radio原点未选中的情况

解决方法：

1、cascader 绑定 change事件，有以下三种方法，皆可实现，关闭下拉框：

this.$refs.catalogue.dropDownVisible = false
this.$refs.catalogue._data.dropDownVisible = false
this.$refs.catalogue.toggleDropDownVisible()

2、在change事件中不要修改 cascader 绑定的变量值

修正后的代码：

<el-cascader
    ref="catalogueExport"
    v-model="exportForm.directIds"
    :options="catalogueList"
    :props="propsConfig"
    @change="handleExportCatalogChange"
  />
  
  propsConfig: {
    value: 'id', 
    label: 'directoryName', 
    children: 'childDirectory', 
    checkStrictly: true, 
    // 次级菜单的展开方式
    expandTrigger: 'hover'
  }
  
  handleExportCatalogChange(val) {
    this.$refs.catalogue.dropDownVisible = false
    // this.$refs.catalogue._data.dropDownVisible = false
    // this.$refs.catalogue.toggleDropDownVisible()
    this.uploadData = {
      spaceId: getSpaceId(),
      // 不改变原值
      directId: this.form.directId[this.form.directId.length - 1]
    }
  }

新的需求：需要点击文字也可以选中选项，完整代码如下：
 

<el-cascader
    ref="catalogueExport"
    v-model="exportForm.directIds"
    popper-class="catalog-popper"
    :options="catalogueList"
    :props="propsConfig"
    @change="handleExportCatalogChange"
/>

propsConfig: {
    value: 'id', 
    label: 'directoryName', 
    children: 'childDirectory', 
    checkStrictly: true, 
    // 次级菜单的展开方式
    expandTrigger: 'hover'
}

// 需要加在全局的样式中
// 目录可点击文字选择

.catalog-popper .el-cascader-panel .el-cascader-menu__list .el-radio{
  width: 94%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  left: 10px;
}

.catalog-popper .el-cascader-panel .el-cascader-menu__list .el-radio.is-disabled:hover {
  cursor: not-allowed;
}