用th\tr\td写一个可以折叠起来的树形表格

下面是一个使用 `<table>` 的 `<th>、<tr>、<td>` 标签编写的可折叠的树形表格示例：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>值</th>
    </tr>
  </thead>
  <tbody>
    <template v-for="node in treeData">
      <tr :key="node.id">
        <td @click="toggleCollapse(node)">
          <span :style="{ paddingLeft: node.level * 20 + 'px' }">
            <span v-if="isFolder(node)">
              <span v-if="node.collapsed">+</span>
              <span v-else>-</span>
            </span>
            {{ node.name }}
          </span>
        </td>
        <td>{{ node.value }}</td>
      </tr>
      <template v-if="!node.collapsed && isFolder(node)">
        <tr v-for="childNode in node.children" :key="childNode.id">
          <td @click="toggleCollapse(childNode)">
            <span :style="{ paddingLeft: childNode.level * 20 + 'px' }">
              <span v-if="isFolder(childNode)">
                <span v-if="childNode.collapsed">+</span>
                <span v-else>-</span>
              </span>
              {{ childNode.name }}
            </span>
          </td>
          <td>{{ childNode.value }}</td>
        </tr>
      </template>
    </template>
  </tbody>
</table>

<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, name: '节点1', value: '值1', level: 0, collapsed: true, children: [
          { id: 2, name: '子节点1', value: '值1-1', level: 1, collapsed: true, children: [
            { id: 3, name: '子子节点1', value: '值1-1-1', level: 2, collapsed: true },
            { id: 4, name: '子子节点2', value: '值1-1-2', level: 2, collapsed: true }
          ]},
          { id: 5, name: '子节点2', value: '值1-2', level: 1, collapsed: true }
        ]},
        { id: 6, name: '节点2', value: '值2', level: 0, collapsed: true, children: [
          { id: 7, name: '子节点3', value: '值2-1', level: 1, collapsed: true },
          { id: 8, name: '子节点4', value: '值2-2', level: 1, collapsed: true }
        ]}
      ]
    };
  },
  methods: {
    isFolder(node) {
      return node.children && node.children.length > 0;
    },
    toggleCollapse(node) {
      node.collapsed = !node.collapsed;
    }
  }
};
</script>

在上述示例中，我们使用了 `<table>`、`<th>`、`<tr>` 和 `<td>` 标签来创建表格结构。通过遍历 `treeData` 数组来渲染每一行的数据。

在每个行中，我们使用了 `<span>` 元素来实现折叠功能。如果某个节点是文件夹（即有子节点），那它将显示一个加号或减号来表示展开或折叠状态，并设置了点击事件 `@click="toggleCollapse(node)"` 来切换折叠状态。

在模板中，我们使用了 `v-if` 来判断节点是否展开，并使用 `v-for` 循环遍历子节点。这样就实现了树形结构的表格，并可通过点击加号或减号来展开或折叠节点。

希望这个示例对你有帮助！如果还有其他问题，请随时提问。