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

以下是一个简化的Vue 3 + TypeScript + Element Plus中关于Tree组件的封装示例：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>
 
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { Tree, TreeProps } from 'element-plus';
 
export default defineComponent({
  name: 'MyTree',
  components: {
    'el-tree': Tree,
  },
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const state = reactive<{ defaultProps: TreeProps }>({
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    });
 
    const handleNodeClick = (data: any) => {
      emit('node-click', data);
    };
 
    return { ...toRefs(state), handleNodeClick };
  },
});
</script>

这个封装的MyTree组件接收一个treeData属性，并在内部使用Element Plus的el-tree组件来渲染树形结构。它还定义了一个处理节点点击事件的方法handleNodeClick，当节点被点击时，它会通过自定义事件的方式将数据传递给父组件。