vxe-table树形

### vxe-table 组件中树形结构的使用方法

#### 创建基础表格并启用树形结构
为了创建带有树形结构的 `vxe-table`，需要先定义数据源，并指定哪些字段用于表示父子关系。通常情况下，会有一个特定属性来标记子节点的存在。

<template>
  <div id="app">
    <vxe-table :data="tableData" row-key>
      <!-- 定义列 -->
      <vxe-column field="name" title="名称"></vxe-column>
      <vxe-column field="size" title="大小"></vxe-column>
      <vxe-column field="type" title="类型"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {id: '1', name: '文件夹A', size: '', type: 'folder'},
        {parentId: '1', id: '2', name: '- 文件B.txt', size: '1kb', type: 'file'}
      ]
    }
  }
}
</script>

上述代码展示了如何通过设置 `row-key` 属性以及提供具有层次关系的数据集来构建基本的树状视图[^1]。

#### 处理多级嵌套与展开收起操作
当面对更复杂的场景时——比如存在多个级别的子项，则可以通过监听事件或配置选项来自定义行为。例如：

- 设置默认全部折叠还是部分展开；
- 控制每次点击父行是否自动切换其下所有子行的状态；

对于处理深层级的情况，在样式上可以考虑增加横向滚动条支持，以便更好地适应宽屏展示需求。

#### 解决层级过深带来的交互难题
针对提到的由于层级过多而导致的选择困难问题，除了调整 CSS 样式外，还可以尝试优化 DOM 结构减少不必要的渲染开销，或是利用虚拟列表技术提高性能表现[^2]。