Cascader 选择器增加半选状态样式

最新推荐文章于 2024-09-06 09:59:14 发布

我的账号昵称

最新推荐文章于 2024-09-06 09:59:14 发布

阅读量171

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_42112342/article/details/134837395

版权

实现效果

修改前效果

三种原生状态class对比：

未选

半选

全选

对比之下发现依次添加了 in-checked-path 和 is-active class名

html

添加 prpper-class

 <el-cascader v-model="queryData.jglx" :options="zclxOption" :props="zclxProps"
                               :show-all-levels="false" clearable
                               placeholder="请选择" popper-class="choose-cascader"
                               ref="jglxRef"
                               @change="handleJglxChecked"
                  ></el-cascader>

样式：

.choose-cascader {
  .el-cascader-node.is-selectable.in-checked-path:not(.is-active) {
    .el-checkbox .el-checkbox__input .el-checkbox__inner {
      background-color: #409eff;
      border-color: #409eff;
    }
    .el-checkbox__input .el-checkbox__inner:before {
      content: "";
      position: absolute;
      display: block;
      background-color: #fff;
      height: 2px;
      transform: scale(.5);
      left: 0;
      right: 0;
      top: 5px;
    }
  }
}

注意点：本页面穿透不过去后试试在根css上写