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中计算表格可用的高度：javascript// 表格高度 = 屏幕高度 - 搜索栏高度 - 底部间距 this.tableHeight = res.windowHeight - this.searchSectionHeight - 16; -
将计算出的高度传给组件的
scrollHeight属性：html<th-table :scrollHeight="tableHeight + 'px'" ... /> -
注意 ：
stickyTop属性设为0即可，因为表头是相对于表格容器固定的。
3.2 怎么固定左侧列？(Fixed Column)
步骤 ：
在定义 tableColumns 数组时，给需要固定的列添加 isFixed: true 属性。
javascript
// 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 方法 ：
javascriptloadMore() { // 1. 防抖/状态检查：如果正在加载或没有更多数据，直接返回 if (this.loadStatus === 'nomore' || this.isLoading) return; // 2. 页码 +1 this.page++; // 3. 请求数据 (标记为非刷新模式) this.fetchData({ isRefresh: false }); } -
处理数据拼接 (在 fetchData 中)：
javascript// 如果是刷新，覆盖列表；如果是加载更多，追加列表 this.list = isRefresh ? newData : this.list.concat(newData); // 动态更新加载状态 this.loadStatus = this.list.length >= this.total ? 'nomore' : 'more';
3.4 底部信息怎么一直显示？(Fixed Footer)
痛点 ：普通表格横向滚动时，底部的"加载中"提示也会跟着跑出屏幕。
解法 ：组件内部采用了物理隔离布局，将 Footer 区域放置在表格滚动容器的下方。
你需要做的 ：
只需要使用 tableFooter 插槽即可。
注意：组件会自动处理高度分配，表格区域会自动占据剩余空间，确保 Footer 始终在最底部且宽度占满屏幕，不会随表格横向滚动。