Vue3 + TS + Element-Plus 封装Tree组件 《亲测可用》

**Vue3 + TS + Element-Plus 封装Tree组件**

在前端开发中，树形控件（Tree）是非常常见的UI组件之一。它可以帮助用户快速地浏览和管理复杂的数据结构。在本文中，我们将使用 Vue3、TypeScript 和 Element-Plus 来封装一个高效且易用的 Tree 组件。

### **依赖安装**

首先，我们需要安装必要的依赖包：

bashnpm install vue@next typescript @vue/compiler-sfc element-plus

javascript// tsconfig.json{
 "compilerOptions": {
 // ...
 "target": "es5",
 "module": "commonjs",
 "strict": true,
 "esModuleInterop": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true }
}

javascript// vue.config.jsmodule.exports = {
 // ...
 transpileDependencies: ['element-plus'],
};

typescript// src/components/Tree.vue<template>
 <div class="tree">
 <el-tree :data="data"
 :props="defaultProps"
 @node-click="handleNodeClick"
 />
 </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElTree } from 'element-plus';

interface TreeNode {
 label: string;
 children?: TreeNode[];
}

export default defineComponent({
 name: 'Tree',
 components: { ElTree },
 props: {
 data: {
 type: Array,
 required: true,
 },
 },
 setup(props) {
 const defaultProps = ref({
 children: 'children',
 label: 'label',
 });

 const handleNodeClick = (data: TreeNode, node: any) => {
 console.log(data);
 };

 return { defaultProps, handleNodeClick };
 },
});
</script>

<style scoped>
.tree {
 /* 样式定义 */
}
</style>

typescript// src/views/Home.vue<template>
 <div class="home">
 <tree :data="data" />
 </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Tree from '@/components/Tree.vue';

export default defineComponent({
 name: 'Home',
 components: { Tree },
 setup() {
 const data = ref([
 {
 label: '一级菜单',
 children: [
 {
 label: '二级菜单1',
 children: [
 {
 label: '三级菜单1-1',
 },
 {
 label: '三级菜单1-2',
 },
 ],
 },
 {
 label: '二级菜单2',
 children: [
 {
 label: '三级菜单2-1',
 },
 {
 label: '三级菜单2-2',
 },
 ],
 },
 ],
 },
 ]);

 return { data };
 },
});
</script>

<style scoped>
.home {
 /* 样式定义 */
}
</style>