element ui更新后 Cascader 级联选择器的一些问题

问题如下：

1、选择器选择后不能自动收回

2、父子节点不关联选择时，label之前出现圆圈

3、点击label不能起作用，必须点击前面的圆圈

同问题二的图

解决方案：

1、问题1解决方案个人发现与其他博主的方案不太一样，解释如下：

在cascader 标签上加一个 :key来标记，并且不断更新该key值，代码如下：

<el-cascader
     v-model="selectedKeys"
     :key="cascaderKey"
     :options="parentCateList"
     :props="cascaderProps"
     @change="parentCateChange"
     clearable
 ></el-cascader>

 

watch: {
    selectedKeys() {
      this.cascaderKey++
    }
  },

2、问题2,、问题3是参考的其他大佬的方案，链接如下：供参考----》》》

element Cascader 级联选择器更新后出现的bug解决方案

elementUI中遇到的一些问题（不知道是不是bug）

vue element Cascader 级联选择器 选择任意一级选项 点击收起，点击label选中等问题详解

Element Cascader 级联选择器 点击文字选中

 

题外

新版element ui的cascader将原本的expand-trigger="hover"移动到:props这个属性下了

<el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange">
</el-cascader>

仍使用原来的方式，浏览器会警告

建议如下使用：

cascaderProps: {
        // 指定触发方式
        expandTrigger: 'hover',
        // 数据源parantList中的cat_id做数据绑定
        value: 'cat_id',
        // 数据源parantList的cat_name渲染出来的内容
        label: 'cat_name',
        // 数据源parantList的children做嵌套
        children: 'children',
        // 父子节点不相互关联，均可选择
        checkStrictly: true
      },