el-cascader级联选择器选择任意一个选项详细解决方案

我会带着你远行 2022-09-11 02:28 726阅读 0赞

el官方提供了props.checkStrictly = true属性可以取消父子节点强关联来达到选择任意选项的目的；

但是存在两个缺陷：

1.只能点击radio的圈圈进行选择

2.选择完了之后级联选择器不会关闭

经过搜索网上的资料，整合了下面的方案来解决上面两个问题。

首先选择器：

<el-cascader
        :key="cascaderKey"
        v-model="fCategoryId"
         :options="option"
         :props="optionProps"
         ref="refHandle"
    >
    </el-cascader>

然后配置属性:

optionProps:{
            value: 'id',    
            label: 'cName',
            children: 'childrenList',    //子元素字段名
            emitPath : false,
            checkStrictly:true,
            expandTrigger: 'hover'    //设置鼠标悬浮展开，如果点击展开的话，会出现点击父节点后选择器直接关闭，不能选择子节点了
    },
    cascaderKey : 1,//防止搜索选项清空数据后出现报错,在加载级联选择器数据的时候+1

++this.cascaderKey
    this.category =[]
    let res2 = await basicDataApiReal.getConfigList({ params })
    this.category = res2.content.list

监听v-model数据，不用点击radio圈圈，点击文字也能关闭级联选择器:

watch: {
        fCategoryId() {
          if (this.$refs.refHandle) {
            this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
          }
        }
      },

css隐藏radio圈圈:

到此，就差不多了，其实不难就是有很多小地方要注意。