美文网首页
element 级联组件阻止前两层多选

element 级联组件阻止前两层多选

作者: Xbbing | 来源:发表于2021-12-01 14:26 被阅读0次

实现效果:

目标

核心代码: 

    ```

       <el-cascader

                                ref="cascader"

                                v-model="label_values"

                                :options="options"

                                :props="props"

                                filterable

                                clearable

                                popper-class="myClass"  // 最重要

                                placeholder="请选择标签自定义"

                                style="width: 300px;"

                            >

                                <template slot-scope="{ node, data }">

                                    <span>{{ data.label }}</span>

                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>

                                </template>

                            </el-cascader>

css代码:

因为级联popper在全局 所以我们需要把vue中的scoped给去掉  

  .myClass .el-cascader-panel { // 此处的myClass 是我们为此级联的popper设置的类名,为了防止改变全局其他级联组件的样式

  .el-scrollbar:first-child {

    .el-checkbox {

      display: none;

    }

  }

  .el-scrollbar:nth-child(2) {

    .el-checkbox {

      display: none;

    }

  }

}

相关文章

网友评论

      本文标题:element 级联组件阻止前两层多选

      本文链接:https://www.haomeiwen.com/subject/vqusxrtx.html