uniapp table表格,固定列怎么实现
时间: 2025-06-14 18:16:30 浏览: 13
UniApp 的 Table 组件支持固定列功能,这使得部分列始终保持在屏幕左侧或右侧,而其他列则可以滚动查看。要实现在 UniApp 中的表格(Table)中固定列,你可以按照以下步骤操作:
1. 使用 `uni-table` 元素作为容器,并设置 `scroll-y` 属性使其可以垂直滚动。
2. 设置需要固定的列宽度,通常在 `cell-width` 或 `fixed-cell-width` 属性中指定,对于固定列,将其设为常量值,比如 "200px"。
3. 使用 `fixed-columns` 属性来指定需要固定的列索引,数组中的元素对应表格的列数从 0 开始计。
例如,一个简单的示例代码可能是这样的:
```html
<template>
<view class="table-container">
<uni-table :data="tableData" :scroll-y="true" fixed-columns="[[0, 1]]">
<!-- 表头 -->
<uni-table-column title="标题1" prop="title1"></uni-table-column>
<uni-table-column title="标题2" prop="title2" fixed></uni-table-column>
<!-- 数据列 -->
<uni-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :title="column.title"></uni-table-column>
</uni-table>
</view>
</template>
<script>
export default {
data() {
return {
tableData: ...,
columns: [
{ title: '固定列1', prop: 'fixedColumn1', fixed: true },
{ title: '数据列', prop: 'dataColumn' },
{ title: '固定列2', prop: 'fixedColumn2', fixed: true }
]
};
}
};
</script>
```
在这个例子中,第一列和第三列会被固定在左右两侧,中间的数据列会随着内容自动滚动。
阅读全文
相关推荐


















