html代码
<el-tree
ref="treeTree"
:data ="treeData"
node-key ="id"
draggable
check-strictly
show-checkbox
@check="handleCheckChange"
:render-content="renderContent"
>
js代码
handleCheckChange (data, checked) {
// data // 当前选中节点的信息
// checked // 所有选中节点组成的信息集合
if (checked.checkedKeys.length > this.max) {
this.$message.warning('最多可选' + this.max + '个')
this.$refs.tree.setChecked(data, false, false) //设置节点的选中状态
} else {
this.checkedData = checked.checkedNodes
this.checkIdArr = checked.checkedKeys
this.$refs.tree.setCheckedKeys(checked.checkedKeys)
}
},
renderContent (h, { node, data, store }) {
return (
<span class="icon-span">
<el-tooltip class="item" effect="light" placement="right">
<div slot="content">
<div>{node.label}</div>
<div>
<span>描述:</span>
<span>{data.desc}</span>
</div>
</div>
<span class="rotate"><i class={data.icon}></i></span>
</el-tooltip>
</span>
)
}
css代码
.el-tree-node__expand-icon.is-leaf {
display: none
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
[class*="el-icon-more"], [class^=el-icon-more] {
transform: rotate(90deg); //显示更多的icon旋转
}
.el-tree-node {
white-space: pre-wrap;
text-align: justify;
margin: px2rem(5) 0
}
.el-tree {
overflow: hidden;
// 不可全选样式
.el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
}
注意:
问题:当需要显示checkbox时,会出现当子节点全部都勾选时,父节点会自动勾选,这会使勾选的数据自动增多。
解决:
在tree中加入check-strictly属性
问题:使有子节点的父节点隐藏多选框
解决:
使用css将其隐藏
el-tree {
overflow: hidden;
// 不可全选样式
.el-tree-node {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: inline-block;
}
.el-checkbox .el-checkbox__inner {
display: none;
}
}
}
问题:
如果需要实时根据勾选状态显示不同的数据时,建议使用check方法,而不用check-change。
因为check-change是当勾选状态发生变化时就会执行,所以不管选中还是取消选中都会执行回调函数;
而check可以在选中时新增数据,取消选中时自动删除数据。