uni-app uni-table 表格固定表头

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app uni-table 表格固定表头

固定表头的样式

想固定表头，加上下面的样式：

/* 修复 uni-table 无法固定表头的问题 */
.uni-table > .uni-table-tr:first-child {
    .uni-table-th,
    .checkbox {
        position: sticky;
        top: 0;
        z-index: 10;
        display: table-cell;
        box-sizing: border-box;
        background-color: #fff;
    }
}

Harmonyos Next教程
4 回复

不起作用


我用两个uni-table, 定位使两个table重合，一个只显示表头

没效果

在uni-app中，要实现表格的固定表头功能，你可以借助一些CSS样式和滚动容器来实现。以下是一个简单的示例，展示如何在uni-app中使用uni-table组件（假设你有一个自定义的uni-table组件或者通过样式实现表格），并通过设置样式实现固定表头的效果。

首先，确保你的项目中已经安装并配置了uni-app的基础环境。

1. 创建一个页面，比如pages/index/index.vue

<template>
  <view class="container">
    <view class="table-header">
      <view class="table-cell">Header 1</view>
      <view class="table-cell">Header 2</view>
      <view class="table-cell">Header 3</view>
    </view>
    <scroll-view scroll-y="true" class="table-body">
      <view v-for="(row, index) in tableData" :key="index" class="table-row">
        <view class="table-cell">{{ row.col1 }}</view>
        <view class="table-cell">{{ row.col2 }}</view>
        <view class="table-cell">{{ row.col3 }}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { col1: 'Data 1-1', col2: 'Data 1-2', col3: 'Data 1-3' },
        { col1: 'Data 2-1', col2: 'Data 2-2', col3: 'Data 2-3' },
        // 添加更多数据行...
      ]
    };
  }
};
</script>

<style scoped>
.container {
  width: 100%;
}
.table-header {
  display: flex;
  background-color: #f5f5f5;
  position: sticky;
  top: 0;
  z-index: 10;
}
.table-body {
  max-height: 400px; /* 根据需要调整高度 */
  overflow-y: auto;
}
.table-row {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.table-cell {
  flex: 1;
  padding: 10px;
  text-align: left;
}
</style>

关键点解释

  1. position: sticky; top: 0;：使用CSS的sticky定位，使表头在滚动时固定在顶部。
  2. scroll-view组件：使用scroll-view组件实现垂直滚动，包裹表格内容部分。
  3. 布局：通过flex布局实现表头和表格行的水平排列。
  4. 样式：通过简单的样式调整表头和表格行的外观，确保内容对齐和可读性。

这个示例展示了如何在uni-app中实现表格固定表头的基本方法。你可以根据实际需求进一步调整样式和结构。

回到顶部