如何用vue3+ts语法封装一个树形组件公共使用

以下是使用vue3和ts语法封装一个树形组件：

1. 创建一个Vue组件，命名为Tree，该组件将接受以下属性：

interface TreeNode {
  id: string;
  name: string;
  children?: TreeNode[];
}

interface TreeProps {
  treeData: TreeNode[];
  collapsable?: boolean;
  showCheckbox?: boolean;
  disabledCheckboxIds?: string[];
  defaultCheckedIds?: string[];
  onChecked?: (checkedIds: string[]) => void;
}

其中，treeData是树结构的数据，collapsable表示节点是否可折叠，showCheckbox表示是否显示复选框，disabledCheckboxIds表示禁用某些节点的复选框，defaultCheckedIds表示默认选中的节点，onChecked表示选中节点时的回调函数。

2. 在组件的setup函数中，先声明一些响应式数据：

import { ref, reactive } from 'vue';

interface CheckboxState {
  [id: string]: boolean;
}

export default {
  props: {
    //...
  },

  setup(props: TreeProps) {
    const treeData = ref(props.treeData);

    const checkboxState = reactive<CheckboxState>({});

    const checkedIds = computed(() => {
      return Object.keys(checkboxState).filter(id => checkboxState[id]);
    });
  }
}

这里用ref存储treeData数据，并用reactive将checkboxState声明为响应式对象，用computed计算出选中的节点列表。

3. 定义一些内部方法，用于处理树结构的展开、折叠、选中、取消选中等操作：

export default {
  //...

  setup(props: TreeProps) {
    //...

    const expandCollapse = (id: string) => {
        // 处理展开折叠操作
    };

    const checkUncheck = (id: string) => {
        // 处理选中取消选中操作
    };

    const isIndeterminate = (id: string) => {
        // 判断某个节点是否处于部分选中状态
    };

    const getCheckedStatus = (id: string) => {
        // 获取某个节点的选中状态
    };
  }
}

4. 最后，编写模板中的代码，用递归方式展示树形结构，根据props的属性动态显示折叠、复选框等。

<template>
  <div class="tree">
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <div class="tree-node">
          <span v-if="collapsable" @click="expandCollapse(node.id)">
            {{ node.children ? (collapsedNodes.includes(node.id) ? '▶' : '▼') : '' }}
          </span>
          <input v-if="showCheckbox && !disabledCheckboxIds.includes(node.id)" type="checkbox" :indeterminate="isIndeterminate(node.id)" :checked="getCheckedStatus(node.id)" @change="checkUncheck(node.id)">
          <span>{{ node.name }}</span>
        </div>
        <tree v-if="node.children && (!collapsable || !collapsedNodes.includes(node.id))"
            :treeData="node.children"
            :collapsable="collapsable"
            :showCheckbox="showCheckbox"
            :disabledCheckboxIds="disabledCheckboxIds"
            :defaultCheckedIds="defaultCheckedIds"
            :onChecked="onChecked"
            :key="node.id"
        />
      </li>
    </ul>
  </div>
</template>

以上就是使用vue3和ts语法封装一个树形组件的步骤。