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

最新推荐文章于 2024-08-20 17:13:41 发布

y_w_x_k

最新推荐文章于 2024-08-20 17:13:41 发布

阅读量4.3k

点赞数 4

本文链接：https://blog.csdn.net/y_w_x_k/article/details/120234862

版权

web 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

javascript

28 篇文章 0 订阅

订阅专栏

本文介绍了如何解决Element UI的级联选择器(Cascader)在`checkStrictly`为true时的两个问题：1.只能通过点击radio选择；2.选择后级联选择器不关闭。通过监听`v-model`、设置`expandTrigger`和自定义CSS，实现了点击文字选择及选择后自动关闭功能。同时也提供了完整的代码示例。

摘要由CSDN通过智能技术生成

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圈圈:

<style lang="scss" >
/* 注意此处不能有scoped 否则样式无法生效 */
.el-cascader-panel{
  .el-radio__inner{
    border: 0px;
    background:transparent;
  }
  .el-radio__input.is-checked .el-radio__inner{
    background:none;
  }
  .el-radio{
    height: 100%;
    width: 150px;
    position: absolute;
    z-index: 10;
  }
}
</style>

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