feat: 优化 FolderTree 层级展开的代码

This commit is contained in:
Frankie Huang 2025-04-13 20:37:29 +08:00
parent 3ae8a65f70
commit e4b5fab2fa

View File

@ -27,6 +27,7 @@ export default {
required: false, required: false,
default: [], default: [],
}, },
// 文件树展开层级。-1 表示全部展开,0 表示不展开,1 表示仅展开一层
expandLevel: { expandLevel: {
type: Number, type: Number,
required: false, required: false,
@ -57,10 +58,12 @@ export default {
}, },
}, },
methods: { methods: {
// 以 treeData 为源数据,渲染文件树
renderTreeByTreeData(currentTreeData) { renderTreeByTreeData(currentTreeData) {
const renderNode = this.renderNodeByNodeData(currentTreeData, 1) const renderNode = this.renderNodeByNodeData(currentTreeData, 0)
this.treeRenderData = renderNode == null ? [] : [renderNode] this.treeRenderData = renderNode == null ? [] : [renderNode]
}, },
// 渲染文件树节点。level 表示 nodeData 在文件树的层级(从 0 开始计数)
renderNodeByNodeData(nodeData, level) { renderNodeByNodeData(nodeData, level) {
// 判断必须包含的字段,没有则返回 null // 判断必须包含的字段,没有则返回 null
if (nodeData == null || nodeData == undefined) { if (nodeData == null || nodeData == undefined) {
@ -85,14 +88,15 @@ export default {
} }
} }
let allowExpand = this.expandLevel < 0 || level <= this.expandLevel let allowExpand = this.expandLevel < 0 || level < this.expandLevel
let nodeRenderData = { let nodeRenderData = {
title: nodeData.name, title: nodeData.name,
directory: nodeData.directory, directory: nodeData.directory,
expand: (allowExpand && nodeData.directory) ? true : false, expand: (allowExpand && nodeData.directory) ? true : false,
selected: this.selectedNode.includes(nodeData.path),
// 附带数据,不直接参与渲染 // 附带数据,不直接参与渲染
path: nodeData.path, path: nodeData.path,
selected: this.selectedNode.includes(nodeData.path), level: level,
} }
if (nodeData.directory) { if (nodeData.directory) {
let childrenRenderData = [] let childrenRenderData = []
@ -143,7 +147,7 @@ export default {
// 向父组件暴露当前选中的文件 // 向父组件暴露当前选中的文件
this.$emit('file-selected', nodeData); this.$emit('file-selected', nodeData);
} },
} }
} }
</script> </script>