Vue3+Vite+TypeScript基于Element plus 二次封装可编辑树组件，组件命名TreeEdit,点击编辑节点名称变成输入框，可以修改，失去焦点后触发编辑节点事件，父组件调后台数据更新接口。新增节点功能是点击新增按钮，弹框选择是新增同级还是子级节点，填写节点名称，弹框点击确定后触发新增节点事件。组件参数：showEdit: 是否可编辑true/false. 默认false；showCheckbox: 树节点是否可选择；treeData: 树型结构数据，节点数据支持配置showEdit控制节点级的是否可编辑；treeExpandAll: 是否全部展开(控制树的展开和收起)；treeNodeKey: 树节点唯一标识属性；组件事件：handleNodeClick: 树节点点击事件，参数：点击节点数据；selectChange: 树复选框选中变化；addItem: 新增节点事件；editItem: 编辑节点事件；deleteItem: 删除节点事件。最后怎么使用，示例代码中多点注释，用vue3的语法setup

好的，你的问题是如何使用Vue3+Vite+TypeScript基于Element plus 二次封装可编辑树组件TreeEdit？以下是示例代码：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    :default-expand-all="treeExpandAll"
    @node-click="handleNodeClick"
    @check-change="selectChange"
    node-key="treeNodeKey"
  >
    <template #default="{ node, data }">
      <div v-if="node.showEdit">
        <el-input
          v-model="data.label"
          size="mini"
          @blur="editItem(data)"
        ></el-input>
      </div>
      <div v-else>
        <span>{{ data.label }}</span>
      </div>
    </template>
  </el-tree>
  <el-button type="primary" @click="addItem">新增节点</el-button>
</template>

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

interface TreeNode {
  id: number;
  label: string;
  children?: TreeNode[];
  showEdit?: boolean;
}

export default defineComponent({
  name: 'TreeEdit',
  components: { ElTree },
  props: {
    showEdit: {
      type: Boolean,
      default: false,
    },
    showCheckbox: {
      type: Boolean,
      default: false,
    },
    treeData: {
      type: Array as () => TreeNode[],
      required: true,
    },
    treeExpandAll: {
      type: Boolean,
      default: false,
    },
    treeNodeKey: {
      type: String,
      default: 'id',
    },
  },
  setup(props, { emit }) {
    const treeProps = {
      checkStrictly: true,
      showCheckbox: props.showCheckbox,
      draggable: true,
    };

    const handleNodeClick = (data: TreeNode) => {
      emit('handleNodeClick', data);
    };

    const selectChange = (data: TreeNode, checked: boolean) => {
      emit('selectChange', data, checked);
    };

    const addItem = () => {
      emit('addItem');
    };

    const editItem = (data: TreeNode) => {
      data.showEdit = false;
      emit('editItem', data);
    };

    const deleteItem = (data: TreeNode) => {
      emit('deleteItem', data);
    };

    return {
      treeProps,
      handleNodeClick,
      selectChange,
      addItem,
      editItem,
      deleteItem,
    };
  },
});
</script>

使用示例：

<template>
  <TreeEdit
    :showEdit="true"
    :showCheckbox="true"
    :treeData="treeData"
    :treeExpandAll="true"
    @handleNodeClick="handleNodeClick"
    @selectChange="selectChange"
    @addItem="addItem"
    @editItem="editItem"
    @deleteItem="deleteItem"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import TreeEdit from './components/TreeEdit.vue';

interface TreeNode {
  id: number;
  label: string;
  children?: TreeNode[];
  showEdit?: boolean;
}

export default defineComponent({
  components: { TreeEdit },
  setup() {
    const treeData = ref<TreeNode[]>([
      {
        id: 1,
        label: '一级节点1',
        children: [
          {
            id: 11,
            label: '二级节点1',
          },
          {
            id: 12,
            label: '二级节点2',
          },
        ],
      },
      {
        id: 2,
        label: '一级节点2',
        children: [
          {
            id: 21,
            label: '二级节点3',
            children: [
              {
                id: 211,
                label: '三级节点1',
              },
            ],
          },
          {
            id: 22,
            label: '二级节点4',
          },
        ],
      },
    ]);

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

    const selectChange = (data: TreeNode, checked: boolean) => {
      console.log(data, checked);
    };

    const addItem = () => {
      console.log('新增节点');
    };

    const editItem = (data: TreeNode) => {
      console.log('编辑节点', data);
    };

    const deleteItem = (data: TreeNode) => {
      console.log('删除节点', data);
    };

    return {
      treeData,
      handleNodeClick,
      selectChange,
      addItem,
      editItem,
      deleteItem,
    };
  },
});
</script>