uni-app 移动端 H5 table 组件扩展需求 可通过 uni-ui 的 table 实现 对每一行进行嵌套表展开 支持树形展开

针对你在uni-app移动端H5中对于table组件的扩展需求，即实现每一行的嵌套表展开以及树形展开功能，可以通过自定义组件和递归渲染的方式来实现。下面是一个简化的代码示例，展示了如何使用uni-app和Vue框架来实现这一功能。

1. 创建自定义Table组件

首先，我们创建一个自定义的CustomTable组件，用于渲染表格和嵌套表。

<template>
  <view class="table">
    <view v-for="(row, rowIndex) in tableData" :key="rowIndex" class="table-row">
      <view v-for="(cell, cellIndex) in row" :key="cellIndex" class="table-cell">
        <view v-if="hasChildren(row)" @click="toggleRow(rowIndex)" class="toggle-cell">
          {{ isExpanded(rowIndex) ? '-' : '+' }} {{ cell }}
        </view>
        <view v-else class="normal-cell">{{ cell }}</view>
      </view>
      <view v-if="isExpanded(rowIndex)" class="nested-table">
        <CustomTable :tableData="row.children" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTable',
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      expandedRows: []
    };
  },
  methods: {
    hasChildren(row) {
      return row.children && row.children.length > 0;
    },
    isExpanded(rowIndex) {
      return this.expandedRows.includes(rowIndex);
    },
    toggleRow(rowIndex) {
      if (this.isExpanded(rowIndex)) {
        this.expandedRows = this.expandedRows.filter(index => index !== rowIndex);
      } else {
        this.expandedRows.push(rowIndex);
      }
    }
  }
};
</script>

<style scoped>
/* 样式省略，根据需要自定义 */
</style>

2. 使用自定义Table组件

在你的页面中引入并使用CustomTable组件。

<template>
  <view>
    <CustomTable :tableData="tableData" />
  </view>
</template>

<script>
import CustomTable from '@/components/CustomTable.vue';

export default {
  components: {
    CustomTable
  },
  data() {
    return {
      tableData: [
        { name: 'Row 1', children: [{ name: 'Nested Row 1-1' }, { name: 'Nested Row 1-2' }] },
        { name: 'Row 2' },
        // 更多数据...
      ]
    };
  }
};
</script>

说明

• CustomTable组件接收一个tableData属性，该属性是一个二维数组，用于表示表格数据。
• 通过递归渲染和条件渲染，实现了嵌套表和树形展开的功能。
• 使用expandedRows数组来跟踪哪些行被展开。
• 点击含有子行的单元格时，调用toggleRow方法切换展开/收起状态。

这个示例只是一个起点，你可以根据实际需求进一步扩展和优化，比如添加更多的样式、处理更复杂的数据结构等。