uni-app 全端Table插件 需求 能固定表头和列

兄弟做好了吗，能不能分享下啊

在uni-app中实现全端（包括H5、小程序、App等）Table插件，并且能固定表头和列，可以借助一些第三方库或者手动实现。由于uni-app本身并没有直接提供这样的组件，我们通常会结合uView UI库或者手动编写自定义组件来实现这一需求。以下是一个简化的手动实现示例，主要展示如何固定表头和第一列。

实现思路

1. 布局：使用CSS的position: sticky属性来固定表头和第一列。
2. 数据渲染：通过v-for循环渲染表格数据。

示例代码

<template>
  <view class="table-container">
    <view class="table-header">
      <view class="th" :style="{ left: '0px' }">#</view>
      <view
        v-for="(column, index) in columns"
        :key="index"
        class="th"
        :style="{ left: `${50 + index * 100}px` }"
      >
        {{ column.label }}
      </view>
    </view>
    <view class="table-body">
      <view v-for="(row, rowIndex) in rows" :key="rowIndex" class="tr">
        <view class="td" :style="{ top: `${50 + rowIndex * 50}px`, left: '0px' }">
          {{ rowIndex + 1 }}
        </view>
        <view
          v-for="(cell, cellIndex) in row"
          :key="cellIndex"
          class="td"
          :style="{ top: `${50 + rowIndex * 50}px`, left: `${50 + cellIndex * 100}px` }"
        >
          {{ cell }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { label: 'Name' },
        { label: 'Age' },
        { label: 'Address' }
      ],
      rows: [
        ['John', 28, 'New York'],
        ['Jane', 22, 'London'],
        ['Tom', 35, 'Paris']
      ]
    };
  }
};
</script>

<style scoped>
.table-container {
  width: 100%;
  overflow: auto;
}
.table-header, .table-body {
  display: flex;
}
.th, .td {
  position: sticky;
  white-space: nowrap;
  padding: 10px;
  box-sizing: border-box;
  background: #f0f0f0; /* Header background */
}
.th {
  top: 0; /* Stick to top for headers */
  z-index: 2; /* Ensure headers are above body cells */
}
.td:first-child {
  left: 0; /* Stick to left for first column */
  z-index: 1; /* Ensure first column is above other cells in the same row */
}
.tr:nth-child(odd) .td:not(:first-child) {
  background: #fff; /* Alternate row colors for better readability */
}
</style>

说明

• 布局：.table-container设置了overflow: auto以允许内容滚动。表头和表体分别使用display: flex布局。
• 定位：使用position: sticky结合top和left属性固定表头和第一列。
• 样式：通过CSS设置单元格的样式，包括背景色、内边距等。

这个示例仅展示了基本功能，实际应用中可能需要更多的样式调整和功能扩展，比如支持排序、筛选等。