uniapp uni-table如何固定表头和左侧第一列

在uniapp中使用uni-table组件时，如何实现表头和左侧第一列的固定？当表格数据较多需要滚动时，表头会跟随滚动消失，左侧第一列也无法固定，导致查看数据不方便。请问有什么方法或配置可以实现类似Excel冻结窗口的效果，保持表头和首列始终可见？

2 回复

在uni-table中，固定表头和左侧列，可使用fixed属性。表头固定：设置sticky为true；左侧列固定：在列配置中添加fixed: 'left'。需注意表格容器高度和宽度设置。


在 UniApp 中使用 uni-table 固定表头和左侧第一列，可以通过以下步骤实现：

1. 固定表头

  • 设置 uni-table 的 fixed 属性为 true，并指定高度（例如 height="400px"）。
  • 表头会自动固定，无需额外代码。

2. 固定左侧第一列

  • 为需要固定的列（第一列）添加 fixed="left" 属性。
  • 注意：固定列需放在列定义的最前面。

示例代码

<template>
  <view>
    <uni-table :data="tableData" border height="400px" fixed>
      <uni-tr>
        <uni-th width="100" fixed="left">姓名</uni-th>
        <uni-th width="120">年龄</uni-th>
        <uni-th width="150">地址</uni-th>
        <uni-th width="200">操作</uni-th>
      </uni-tr>
      <uni-tr v-for="(item, index) in tableData" :key="index">
        <uni-td width="100" fixed="left">{{ item.name }}</uni-td>
        <uni-td width="120">{{ item.age }}</uni-td>
        <uni-td width="150">{{ item.address }}</uni-td>
        <uni-td width="200">
          <button @click="handleClick(item)">查看</button>
        </uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市' },
        { name: '李四', age: 30, address: '上海市' }
      ]
    };
  },
  methods: {
    handleClick(item) {
      console.log('点击行数据:', item);
    }
  }
};
</script>

注意事项

  • 列宽度：固定列的宽度需明确指定（如 width="100"），避免布局错乱。
  • 列顺序：固定列必须定义在非固定列之前。
  • 兼容性：确保使用最新版 uni-ui（通过 HBuilderX 或 npm 安装）。

如果遇到渲染问题，检查样式是否被覆盖，或尝试强制刷新组件。

回到顶部