uniapp 锁表头的表格unitable如何使用

在uniapp中使用unitable组件时，如何实现表格锁表头功能？我在官方文档中没有找到相关配置项，尝试给表格设置固定高度后表头依然不会固定。请问具体需要怎样设置才能让表头在滚动时保持固定？能否提供一个完整的代码示例？

2 回复

使用 uni-table 锁表头，只需在表格组件中添加 fixed 属性即可。示例代码：

<uni-table fixed>
  <uni-tr>
    <uni-th>姓名</uni-th>
    <uni-th>年龄</uni-th>
  </uni-tr>
  <!-- 表格数据行 -->
</uni-table>

设置 fixed 后，表头会在滚动时固定显示。


UniApp 中的 uni-table 组件支持固定表头，只需设置 fixed 属性即可。以下是具体使用方法：

基本步骤：

  1. 使用 uni-table 标签包裹表格。
  2. 在 uni-tr 中设置 fixed 属性为 "top" 来锁定表头行。
  3. 确保表格有明确的高度（通过 CSS 设置），否则滚动可能不生效。

示例代码：

<template>
  <view>
    <uni-table border style="width: 100%; height: 400px;">
      <!-- 锁定表头 -->
      <uni-tr>
        <uni-th width="100" fixed="top">姓名</uni-th>
        <uni-th width="150" fixed="top">年龄</uni-th>
        <uni-th width="200" fixed="top">地址</uni-th>
      </uni-tr>
      
      <!-- 表格数据 -->
      <uni-tr v-for="(item, index) in tableData" :key="index">
        <uni-td>{{ item.name }}</uni-td>
        <uni-td>{{ item.age }}</uni-td>
        <uni-td>{{ item.address }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市' },
        { name: '李四', age: 30, address: '上海市' }
        // ... 更多数据
      ]
    }
  }
}
</script>

<style scoped>
/* 确保表格容器有固定高度 */
.uni-table {
  height: 400px;
  overflow-y: auto;
}
</style>

关键点说明：

  • fixed="top"：锁定该行在顶部，滚动时保持可见。
  • 必须为表格容器设置高度（如 height: 400px），否则无法触发滚动。
  • 若需锁定左侧列，可在 uni-th 或 uni-td 上设置 fixed="left"。

注意事项：

  • 确保使用最新版 uni-app 和 uni-ui 组件库。
  • 多级表头锁定需结合多个 fixed 属性配置。

通过以上配置即可实现表头固定的表格效果。

回到顶部