el-cascader一级目录无checkbox,其他级目录父级勾选只展示父级,子级没有全部勾选,展示子级
在el-cascader
组件中,如果你想要实现一级目录不显示复选框,其他级别目录的父级勾选时只显示父级目录,子级目录没有全部勾选的效果,你可以通过自定义模板来实现这种效果。
以下是一个简单的实现示例:
<template>
<el-cascader
:options="options"
:props="{ multiple: true, checkStrictly: true, label: 'label', value: 'value', children: 'children' }"
:show-all-levels="false"
:render-content="renderContent"
></el-cascader>
</template>
<script>
export default {
data() {
return {
options: [
{
label: '一级目录1',
value: '1',
children: [
{
label: '二级目录1-1',
value: '1-1',
children: [
{
label: '三级目录1-1-1',
value: '1-1-1',
},
],
},
// ... 其他二级目录
],
},
// ... 其他一级目录
],
};
},
methods: {
renderContent(h, option) {
if (option.level === 1) {
return h('span', { class: 'option-label' }, option.label);
} else {
return h('el-checkbox', {
props: {
value: option.checked,
label: option.label,
},
on: {
change: (value) => {
this.$refs.cascader.handleCheckChange(value, option, false);
},
},
});
}
},
},
};
</script>
在这个示例中,render-content
属性用于自定义渲染内容,renderContent
方法根据级别判断是否显示复选框。一级目录不显示复选框,而二级及以上目录则显示复选框,并且父级目录的勾选仅表示父目录本身,不会影响子目录的勾选状态。
注意:checkStrictly: true
这个属性确保了父子级目录的勾选是独立的,不会因为父级目录的勾选而影响子级目录的状态。
评论已关闭