html
复制代码
<el-tree class="task-note-tree" ref="elTree" :data="tagTreeList" default-expand-all node-key="labelId"
:props="defaultProps" highlight-current :expand-on-click-node="false"
@node-click="handleNodeClick">
<div slot-scope="{node, data}" class="tree-node">
<span class="node-name text-hide-one" :title="data.name">{{ data.name }}</span>
</div>
</el-tree>
javascript
复制代码
// 获取后端数据
async getinitData () {
const res = await markTaskDetailPoints({
photoId: this.currentData.Id,
subTaskId: this.currentData.Id,
taskCollectionId: this.currentData.taskCollectionId
});
this.table.loading = false;
if (res.code === 200) {
this.currentCanvasAll = res.data;
//this.tagTreeList表示所有的树结构信息
//this.currentCanvasAll表示当前要选中的节点数据
// 默认选中树节点
await this.selectTree(this.tagTreeList, this.currentCanvasAll);
}
},
//节点点击事件
handleNodeClick (data) {
this.currentLabelId = data.labelId;
//this.currentCanvasAll后端返回的节点id信息与当前当前的id节点是否一致
this.currentCanvasData = this.currentCanvasAll.filter(item => item.labelId === this.currentLabelId);
this.$nextTick(() => {
// 确保 DOM 更新后执行 相关处理逻辑方法
this.clickFN();
});
},
//选中节点
selectTree (treeData, currentCanvasAll) {
this.currentCanvasData = [];
treeData.forEach(node => {
currentCanvasAll.forEach(item => {
//根据后端返回的数据判断是否匹配
if (item.labelId === node.labelId) {
// 默认选中当前节点
// this.$refs.elTree.setChecked(node, false) 表示勾选上当前节点 与show-checkbox配合
this.$refs.elTree.setCurrentKey(item.labelId); //表示激活当前节点
this.$nextTick(() => {
// 确保 DOM 更新后再设置选中状态
this.handleNodeClick(item);
});
}
});
判断是否有子数据，有就执行回调
if (node.child && node.child.length > 0) {
this.selectTree(node.child, currentCanvasAll);
}
});
},