咨询电话:
15628812133
01
2023/07

el-tree技巧之只有最后一层级的子节点可被选择

发布时间:2023-07-01 18:26:37
发布者:MaiMai
浏览量:
0

ElementUI官网提供的树形控件能够用清晰的层级结构展示信息,可展开或折叠。对于需要需要选择层级的树,其提供了show-checkbox参数,将他设置为true后便可得到一个带多选框的树,如图所示:

eltree

但是有的时候,我们只希望选择子节点,而隐藏根节点的选框。

eltree

以这条数据为例。

由于el-tree支持自定义节点内容,可以通过两种方法进行树节点内容的自定义:render-contentscoped slot。我们这里使用第二种scoped slot,使用 scoped slot 会传入两个参数nodedata,分别表示当前节点的 Node 对象和当前节点的数据。

其中,第一级的label不需要选框,第二级children下的label需要选框。在自定义节点中,我们准备好两个span标签,通过v-ifv-else来区分根节点与子节点。

自定义节点

这样,便可以成功去掉根节点的选框,效果图如下:

eltree

关键词:
返回列表