uniapp-APP端table列表左侧第一列固定、头部固定

原创已于 2025-12-19 17:04:23 修改 · 238 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #windows

于 2025-12-19 11:55:16 首次发布

table列表左侧第一列固定、头部固定

th-table是基于uni-table二次封装的增强型表格组件，解决了原生uni-table` 在移动端复杂场景下的痛点，主要特性包括：

✅ 表头吸顶：表格内部滚动时，表头始终固定在顶部。
✅ 左侧列固定：支持固定左侧的一列或多列，右侧内容可横向滚动。
✅ 上拉加载：支持触底加载更多数据。
✅ 底部信息固定：底部的“加载中/总数”提示栏始终可见，不会随表格横向滚动而移出屏幕。
✅ 下拉刷新：配合外层容器实现丝滑的下拉刷新。

场景一：固定表头（单接口模式）

//在使用该组件的页面（如 `dataIndex.vue`）中

**适用场景**：表头是写死的，只需要调用一个接口获取列表数据。
**数据结构示例**：`[{ name: '张三', age: 18, address: '北京市...' }, ...]`

```vue
<template>
  <view class="page-container">
    <!-- 外层滚动，负责页面刷新 -->
    <scroll-view scroll-y style="height: 100vh;">
      <view class="table-wrap">
        <th-table 
          :scrollHeight="tableHeight + 'px'"
          :column="columns" 
          :listData="list"
          @scrolltolower="loadMore"
        >
          <!-- 底部状态栏 -->
          <template slot="tableFooter">
            <view class="footer-status" style="padding: 10px; text-align: center;">
              {{ loadStatus === 'nomore' ? '没有更多数据了' : '加载中...' }}
              <text style="margin-left: 10px;">总数: {{ total }}</text>
            </view>
          </template>
        </th-table>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import thTable from '@/components/th-table/components/th-table/th-table.vue'

export default {
	components: {
		thTable
	},
  data() {
    return {
      tableHeight: 500,
      page: 1,
      total: 0,
      list: [],
      loadStatus: 'more',
      // 【重点】直接定义好表头
      columns: [
        { title: '姓名', key: 'name', width: 2, isFixed: true }, // 左侧固定
        { title: '年龄', key: 'age', width: 1.5 },
        { title: '地址', key: 'address', width: 4 }
      ]
    }
  },
  onReady() {
    // 计算表格高度
    const res = uni.getSystemInfoSync();
    this.tableHeight = res.windowHeight - 20; // 减去边距
    this.getData();
  },
  methods: {
    loadMore() {
      if (this.loadStatus === 'nomore') return;
      this.page++;
      this.getData();
    },
    getData() {
      // 模拟接口请求
      setTimeout(() => {
        // 假设接口返回的数据
        const resRows = [
          { name: '张三', age: 18, address: '北京市朝阳区...' },
          { name: '李四', age: 22, address: '上海市浦东新区...' }
        ];
        const resTotal = 20;

        if (this.page === 1) {
          this.list = resRows;
        } else {
          this.list = this.list.concat(resRows);
        }
        this.total = resTotal;
        this.loadStatus = this.list.length >= this.total ? 'nomore' : 'more';
      }, 500);
    }
  }
}
</script>

场景二：动态表头（双接口模式）

**适用场景**：表头不确定（例如：不同的监测站点有不同的监测指标），需要先调接口1拿表头，再调接口2拿数据。
**逻辑**：`getHeader()` -> `getData()`

```vue
<template>
  <view class="page-container">
    <th-table 
      :scrollHeight="tableHeight + 'px'"
      :column="columns" 
      :listData="list"
      @scrolltolower="loadMore"
    >
      <!-- 动态列的内容插槽（可选，如果需要特殊处理） -->
      <template slot="dynamicCol" slot-scope="{ item, column }">
        <view :style="{ color: item[column.key] > 10 ? 'red' : 'black' }">
          {{ item[column.key] }}
        </view>
      </template>
    </th-table>
  </view>
</template>

<script>
import thTable from '@/components/th-table/components/th-table/th-table.vue'

export default {
	components: {
		thTable
	},
  data() {
    return {
      tableHeight: 500,
      columns: [], // 【重点】初始为空
      list: [],
      page: 1,
       loadStatus: 'more',
      total:0
    }
  },
  onLoad() {
    this.initPage();
  },
  methods: {
    async initPage() {
      await this.getHeader(); // 1. 先拿表头
      this.getData();         // 2. 再拿数据
    },
    // 获取表头接口
    getHeader() {
      return new Promise((resolve) => {
        // 模拟请求表头
        setTimeout(() => {
          const apiHeader = [
            { label: 'pH值', code: 'ph' },
            { label: '溶解氧', code: 'do' }
          ];
          
          // 构造固定列
          const baseCols = [
             { title: '站点名称', key: 'siteName', width: 2, isFixed: true }
          ];

          // 构造动态列
          const dynamicCols = apiHeader.map(h => ({
            title: h.label,
            key: h.code,
            width: 2,
            slot: 'dynamicCol' // 指定插槽名，方便自定义样式
          }));

          this.columns = [...baseCols, ...dynamicCols];
          resolve();
        }, 300);
      });
    },
    // 获取数据接口
    getData() {
      // 模拟请求数据
    
        // 模拟接口请求
      setTimeout(() => {
          // 数据结构: { siteName: 'A站点', ph: 7.2, do: 6.5 }
      const resData = [
        { siteName: '监测点A', ph: 7.2, do: 5.4 },
        { siteName: '监测点B', ph: 8.1, do: 6.8 }
      ];
        const resTotal = 20;

        if (this.page === 1) {
          this.list = resData ;
        } else {
          this.list = this.list.concat(resData );
        }
        this.total = resTotal;
        this.loadStatus = this.list.length >= this.total ? 'nomore' : 'more';
      }, 500);
    }
  }
}
</script>

3.1 怎么固定表头？(Sticky Header)

原理：组件内部使用了 position: sticky。为了让它生效，必须给表格指定一个明确的高度，让表格内部产生滚动。

步骤：

在页面 onReady 或 onLoad 中计算表格可用的高度：

// 表格高度 = 屏幕高度 - 搜索栏高度 - 底部间距
this.tableHeight = res.windowHeight - this.searchSectionHeight - 16;

将计算出的高度传给组件的 scrollHeight 属性：

<th-table :scrollHeight="tableHeight + 'px'" ... />

注意：stickyTop 属性设为 0 即可，因为表头是相对于表格容器固定的。

3.2 怎么固定左侧列？(Fixed Column)

步骤：
在定义 tableColumns 数组时，给需要固定的列添加 isFixed: true 属性。

// data() 或 computed 中
tableColumns: [
  {
    title: '名称',
    key: 'name',
    width: 2.2,    // 宽度比例
    isFixed: true, // <--- 关键！开启左侧固定
    slot: 'name'   // 自定义插槽名
  },
  {
    title: '更新时间',
    key: 'updateTime',
    isFixed: false // 普通列
  },
  // ...
]

3.3 怎么实现上拉加载？(Infinite Scroll)

原理：利用 scroll-view 的 @scrolltolower 事件。

步骤：

绑定事件：<th-table @scrolltolower="loadMore" ... />

实现 loadMore 方法：

loadMore() {
  // 1. 防抖/状态检查：如果正在加载或没有更多数据，直接返回
  if (this.loadStatus === 'nomore' || this.isLoading) return;
  
  // 2. 页码 +1
  this.page++;
  
  // 3. 请求数据 (标记为非刷新模式)
  this.fetchData({ isRefresh: false });
}

处理数据拼接 (在 fetchData 中)：

// 如果是刷新，覆盖列表；如果是加载更多，追加列表
this.list = isRefresh ? newData : this.list.concat(newData);

// 动态更新加载状态
this.loadStatus = this.list.length >= this.total ? 'nomore' : 'more';