在后台管理系统中,经常会遇到树状结构图,比如员工职能设置,商城物品结构图等等。
<el-tree
@check-change="getEditTree" // 节点状态发生变化时的回调 ,并且有三个参数
:data="treeData" // 后台返回的树状数据
show-checkbox
node-key="id" // 树节点的唯一标识属性
ref="editTreeData" // dom操作需要拿到这个树的节点
highlight-current
:props="defaultProps"
default-expand-all
></el-tree>
// 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
getEditTree(data,checked) {
if(checked){
this.$refs.editTreeData.setCheckedKeys([data.id]);
}
}
// 这里我们是按照每个节点的id作为树状唯一标识
// setCheckedKeys 通过该树状dom,使用该内置方法可以通过key设置选中节点,参数是个数组,比如[1,2],则相当于,id为1,2被选中。
this.$refs.treeData1.getCheckedNodes()
// getCheckedNodes() 内置方法,被勾选的节点组成的数组,默认半选不算