本文介紹了基于 ElementPlus 的 el-tree 組件進行二次封裝的 TreeView 組件，使用 Vue3 和 JavaScript 實現。TreeView 組件通過 props 接收樹形數據、配置項等，支持懶加載、節點展開/收起、節點點擊、刪除、編輯等操作。組件內部通過 ref 管理樹實例，并提供了 clearCurrentNode、setCurrentKey、setExpandedKeys 等方法供父組件調用。renderContent 方法用于自定義節點內容，支持根據配置顯示刪除和編輯按鈕。事件處理函數通過 emit 將節點操作傳遞給父組件，實現了組件與父組件的交互。樣式部分通過 scoped 樣式隔離，確保組件樣式獨立。

準備組件 TreeView treeUtils方法

1. TreeView組件

<template><div class="tree-container"><div v-if="isShowHeader" class="tree-header"><slot name="header"></slot></div><el-tree ref="treeRef" :data="treeData" :props="treeProps" highlight-current node-key="id":render-content="renderContent" :lazy="lazy" :load="lazy ? loadNode : undefined":default-expanded-keys="expandedKeys" :show-checkbox="showCheckbox" :check-strictly="checkStrictly"@node-click="handleNodeClick" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"@check="handleCheck" /></div>
</template><script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import { handleNodeExpand as handleNodeExpandUtil, handleNodeCollapse as handleNodeCollapseUtil } from '@/utils/treeUtils'// 接收父組件傳來的數據
const props = defineProps({treeData: {type: Array,required: true,},treeProps: {type: Object,default: () => ({children: 'children',label: 'label',isLeaf: 'isLeaf'})},showDelete: {type: Boolean,default: false},showEdit: {type: Boolean,default: false},lazy: {type: Boolean,default: false},isShowHeader: {type: Boolean,default: false},showCheckbox: {type: Boolean,default: false},checkStrictly: {type: Boolean,default: false}
})
const applicationYear = ref('')// 接收父組件傳來的事件
const emit = defineEmits(['nodeClick', 'loadChildren', 'deleteNode', 'nodeExpand', 'nodeCollapse','check'
])// 使用props中的treeProps
const { treeProps } = props// 添加treeRef
const treeRef = ref(null)// 展開的節點keys
const expandedKeys = ref([])// 添加取消選中節點的方法
const clearCurrentNode = () => {if (treeRef.value) {treeRef.value.setCurrentKey(null)}
}// 設置當前選中的節點
const setCurrentKey = (key) => {if (treeRef.value) {treeRef.value.setCurrentKey(key)}
}// 設置展開的節點
const setExpandedKeys = (keys) => {expandedKeys.value = [...keys]
}// 獲取當前展開的節點
const getExpandedKeys = () => {return expandedKeys.value
}// 處理復選框選中事件
const handleCheck = (data, { checkedKeys, checkedNodes }) => {emit('check', {data,checkedKeys,checkedNodes})
}// 獲取選中的節點
const getCheckedKeys = () => {return treeRef.value?.getCheckedKeys() || []
}// 獲取半選中的節點
const getHalfCheckedKeys = () => {return treeRef.value?.getHalfCheckedKeys() || []
}// 設置選中的節點
const setCheckedKeys = (keys) => {treeRef.value?.setCheckedKeys(keys)
}// 暴露方法給父組件
defineExpose({clearCurrentNode,setCurrentKey,setExpandedKeys,getExpandedKeys,getCheckedKeys,getHalfCheckedKeys,setCheckedKeys
})const renderContent = (hFn, { node, data }) => {const content = [hFn('span', data[props.treeProps.label] || data.label)]// 根據showDelete配置決定是否顯示刪除按鈕if (props.showDelete) {content.push(hFn('el-button',{type: 'danger',size: 'small',class: 'delete-btn',onClick: () => handleDeleteNode(node, data),},[hFn(Delete)]))}// 根據showDelete配置決定是否顯示修改按鈕if (props.showEdit) {content.push(hFn('el-button',{type: 'danger',size: 'small',class: 'edit-btn',onClick: () => handleEditNode(data),},[hFn(Edit)]))}return hFn('div',{ class: 'tree-node' },content)
}// 加載子節點數據
const loadNode = (node, resolve) => {if (!props.lazy) {return resolve([])}if (node.level === 0) {// 根節點直接返回初始數據return resolve(props.treeData)}// 觸發父組件的事件來獲取子節點數據emit('loadChildren', {node,resolve: (children) => {// 確保children是數組const childNodes = Array.isArray(children) ? children : []// 將子節點數據設置到當前節點的children屬性中if (node.data) {node.data.children = childNodes}resolve(childNodes)}})
}// 處理節點點擊事件
const handleNodeClick = (data, node) => {emit('nodeClick', data)
}// 處理刪除節點事件
const handleDeleteNode = (node, data) => {emit('deleteNode', { node, data })
}// 處理修改節點事件
const handleEditNode = (nodeData) => {emit('editNode', nodeData)
}// 處理節點展開
const handleNodeExpand = (data, node) => {expandedKeys.value = handleNodeExpandUtil({data,node,expandedKeys: expandedKeys.value,onExpand: (data) => emit('nodeExpand', data)})
}// 處理節點收起
const handleNodeCollapse = (data, node) => {expandedKeys.value = handleNodeCollapseUtil({data,expandedKeys: expandedKeys.value,onCollapse: (data) => emit('nodeCollapse', data)})
}
</script><style scoped>
.tree-container {height: 100%;border: 1px solid #e4e7ed;padding: 10px;overflow: auto;
}::v-deep(.tree-node .delete-btn) {display: none !important;
}::v-deep(.tree-node .edit-btn) {display: none !important;
}::v-deep(.tree-node:hover) {color: skyblue;
}::v-deep(.tree-node:hover .delete-btn) {width: 14px;display: inline-block !important;color: red;margin-left: 5px;transform: translateY(2px);
}::v-deep(.tree-node:hover .edit-btn) {width: 14px;display: inline-block !important;color: rgb(17, 0, 255);margin-left: 5px;transform: translateY(2px);
}.tree-header {border-bottom: 1px solid #e4e7ed;margin-bottom: 10px;
}
</style>

2. treeUtils.js文件

import { nextTick } from 'vue'/*** 處理樹節點展開* @param {Object} options 配置選項* @param {Object} options.data 節點數據* @param {Object} options.node 節點對象* @param {Array} options.expandedKeys 展開節點數組* @param {Function} options.onExpand 展開回調函數* @returns {Array} 更新后的展開節點數組*/
export const handleNodeExpand = ({data,node,expandedKeys,onExpand
}) => {// 如果節點ID不在展開數組中，則添加if (!expandedKeys.includes(data.id)) {expandedKeys.push(data.id)}// 確保父節點也保持展開狀態let parent = node.parentwhile (parent && parent.data && parent.data.id) {if (!expandedKeys.includes(parent.data.id)) {expandedKeys.push(parent.data.id)}parent = parent.parent}// 調用展開回調if (onExpand) {onExpand(data)}return expandedKeys
}/*** 處理樹節點收起* @param {Object} options 配置選項* @param {Object} options.data 節點數據* @param {Array} options.expandedKeys 展開節點數組* @param {Function} options.onCollapse 收起回調函數* @returns {Array} 更新后的展開節點數組*/
export const handleNodeCollapse = ({data,expandedKeys,onCollapse
}) => {// 從展開數組中移除節點IDconst index = expandedKeys.indexOf(data.id)if (index > -1) {expandedKeys.splice(index, 1)}// 調用收起回調if (onCollapse) {onCollapse(data)}return expandedKeys
}/*** 處理樹節點刪除后的展開狀態* @param {Object} options 配置選項* @param {Object} options.node 要刪除的節點* @param {Object} options.data 節點數據* @param {Array} options.treeData 樹數據* @param {Function} options.getExpandedKeys 獲取展開節點的方法* @param {Function} options.setExpandedKeys 設置展開節點的方法* @param {Function} options.clearCurrentNode 清除當前選中節點的方法* @returns {Promise<void>}*/
export const handleTreeDelete = async ({node,data,treeData,getExpandedKeys,setExpandedKeys,clearCurrentNode
}) => {const parent = node.parentconst children = parent.data.children || parent.dataconst index = children.findIndex((d) => d.id === data.id)// 獲取當前展開的節點const currentExpandedKeys = getExpandedKeys()// 刪除節點children.splice(index, 1)// 強制刷新treeDatatreeData.value = JSON.parse(JSON.stringify(treeData.value))// 重新設置展開狀態await nextTick()// 確保父節點保持展開狀態if (parent && parent.data && parent.data.id) {if (!currentExpandedKeys.includes(parent.data.id)) {currentExpandedKeys.push(parent.data.id)}}clearCurrentNode()setExpandedKeys(currentExpandedKeys)return currentExpandedKeys
} 

父組件使用

1. 導入組件

import TreeView from '@/components/basicComponents/TreeView'

2. 使用組件

<TreeView ref="treeViewRef":treeData="treeData" :treeProps="customTreeProps" :showDelete="true" :lazy="true":default-expanded-keys="expandedKeys"@nodeClick="handleNodeClick" @deleteNode="handleNodeDelete"@loadChildren="handleLoadChildren"@nodeExpand="handleNodeExpand"@nodeCollapse="handleNodeCollapse"/>

3. 父組件里使用方法

// 定義treeViewRef
const treeViewRef = ref(null)
const treeData = ref([]) //樹數據
const expandedKeys = ref([]) // 添加展開節點的key數組
// 自定義樹形配置
const customTreeProps = {children: 'children',  // 子節點字段名label: 'label',        // 使用label字段作為顯示文本isLeaf: 'isLeaf'       // 是否為葉子節點字段名
}
const handleLoadChildren = async ({ node, resolve }) => {try {const children = await fetchTreeChildrenData(node.data.id)resolve(children)} catch (error) {console.error('加載子節點失敗:', error)resolve([]) // 加載失敗時返回空數組}
}
// 獲取樹子節點數據 懶加載 格式化數據
const fetchTreeChildrenData = async (id = '') => {const { data } = await getZhuangBeiCategory( id )const formattedChildren = data.map(item => ({id: item.id,label: item.label,  // 添加label字段isLeaf: item.sonNum > 0 ? false : true,  // 修正isLeaf的邏輯children: [] // 初始化為空數組，等待后續加載}))if(id) return formattedChildrentreeData.value = formattedChildren
}
//刪除子節點
const handleNodeDelete = ({node, data}) => {ElMessageBox.confirm(`<div style="text-align: center;">確定要刪除【${data.label}】嗎？</div>'提示',{dangerouslyUseHTMLString: true,confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning',}).then(async() => {try{await deleteZhuangBeiCategory(data.id)ElMessage({  type: 'success',  message: '刪除成功！'})await handleTreeDelete({node,data,treeData,getExpandedKeys: () => treeViewRef.value.getExpandedKeys(),setExpandedKeys: (keys) => treeViewRef.value.setExpandedKeys(keys),clearCurrentNode: () => treeViewRef.value.clearCurrentNode()})}catch{ElMessage({  type: 'error',  message: '刪除失敗！'})}}).catch(() => {// 取消了，不做處理})
}
// 處理節點展開
const handleNodeExpand = (data) => {if (!expandedKeys.value.includes(data.id)) {expandedKeys.value.push(data.id)}
}// 處理節點收起
const handleNodeCollapse = (data) => {const index = expandedKeys.value.indexOf(data.id)if (index > -1) {expandedKeys.value.splice(index, 1)}
}// 處理節點點擊
const handleNodeClick = (nodeData) => {
}

• 其他方法比如復選框，編輯不在示例，感興趣的可以去試試