一、代码实现
1. 属性了解 （更多）
- node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 String
- current-node-key 当前选中的节点 string, number
- expand-on-click-node 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 boolean — true
- default-expand-all 是否默认展开所有节点 boolean — false
- highlight-current 是否高亮当前选中节点，默认值是 false。 boolean — false
- check-on-click-node 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。 boolean — false
2. 实现步骤
- 设置一个固定值 node-key=“id”, 根据实际项目配置唯一的标记
- 定义当前选中节点 :current-node-key=“currentDeptId”
3.代码示例
<el-tree :data="deptOptions" :props="defaultProps" node-key="id" :expand-on-click-node="false"
ref="tree" default-expand-all highlight-current @node-click="handleNodeClick"
:current-node-key="currentDeptId" :check-on-click-node="true">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }} </span>
</span>
</el-tree>
// 部门树选项
deptOptions: undefined,
// 配置选项
defaultProps: {
children: "children",
label: "label",
},
//默认选中的部门
currentDeptId: null, // 比如：107
currentDeptName: null,
methods: {
// 节点单击事件
handleNodeClick(data) {
console.log(data, '节点单击事件')
this.currentDeptId = data.id
this.currentDeptName = data.label
},
}
二、 效果图
