uniapp 树形表格

uniapp 实现树形表格的方法

在uniapp中实现树形表格可以通过以下方式完成，结合组件递归和数据处理实现层级展示。

数据准备 树形结构数据通常包含层级关系，例如：

[
  {
    "id": 1,
    "name": "父节点1",
    "children": [
      {
        "id": 11,
        "name": "子节点1"
      }
    ]
  }
]

递归组件实现 创建可递归调用的组件用于渲染树形结构：

<template>
  <view>
    <view v-for="(item, index) in treeData" :key="item.id">
      <view @click="toggleExpand(item)">
        {{ item.name }}
        <text v-if="item.children">{{ item.expand ? '-' : '+' }}</text>
      </view>
      <view v-if="item.expand && item.children" style="padding-left: 20px;">
        <tree-table :treeData="item.children"></tree-table>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'tree-table',
  props: {
    treeData: Array
  },
  methods: {
    toggleExpand(item) {
      this.$set(item, 'expand', !item.expand)
    }
  }
}
</script>

表格样式优化 使用uni-app的样式系统实现表格外观：

.tree-table {
  width: 100%;
  border-collapse: collapse;
}
.tree-node {
  border: 1px solid #ddd;
  padding: 8px;
}

动态加载优化 对于大数据量树形结构，建议实现动态加载：

async loadChildren(parentId) {
  const res = await uni.request({
    url: '/api/getChildren',
    data: { parentId }
  })
  this.$set(this.treeData.find(item => item.id === parentId), 'children', res.data)
}

注意事项

• 确保组件命名正确并在pages.json中注册
• 大数据量情况下考虑虚拟滚动优化
• 移动端注意点击区域大小适配
• 可结合uni-table组件实现更规范的表格样式

第三方组件方案

除了自定义实现，也可以考虑以下方案：

uView组件库 uView的tree组件支持表格形式展示：

<u-tree
  :list="treeData"
  show-checkbox
  expand-all
></u-tree>

uni-data-checkbox组件 通过修改样式实现树形表格效果：

<uni-data-checkbox 
  v-model="value" 
  :localdata="treeData"
  multiple
></uni-data-checkbox>

实现建议

1. 根据项目复杂度选择自定义或第三方组件
2. 注意性能优化，特别是大数据量场景
3. 考虑添加搜索、筛选等功能增强实用性
4. 不同平台样式需要单独适配