实现效果:

核心代码:
```
<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;
}
}
}
网友评论