Uniapp Vue Table上下左右滚动

	<template>
  <view class="container">
    <view class="table-wrap">
      <view class="table-content">
    
        <view class="tr header-row">
          <view 
            v-for="(col, index) in columns" 
            :key="index" 
            class="th"
            :class="{ 
              'fixed-col': col.fixed,
              'stretch-col': index === columns.length - 1 && !col.fixed 
            }"
            :style="{ width: col.width, left: col.fixed ? '0' : 'auto' }"
          >
            {{ col.label }}
          </view>
        </view>

        <view class="tr body-row" v-for="(row, rowIndex) in tableData" :key="rowIndex">
          <view 
            v-for="(col, colIndex) in columns" 
            :key="colIndex" 
            class="td"
            :class="{ 
              'fixed-col': col.fixed,
              'stretch-col': colIndex === columns.length - 1 && !col.fixed 
            }"
            :style="{ width: col.width, left: col.fixed ? '0' : 'auto' }"
          >
            {{ row[col.prop] }}
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { label: '编号', prop: 'id', width: '150rpx', fixed: true },
        { label: '姓名', prop: 'name', width: '200rpx' },
        { label: '年龄', prop: 'age', width: '150rpx' },
        { label: '部门', prop: 'dept', width: '200rpx' },
        { label: '职位', prop: 'job', width: '200rpx' },
        { label: '入职时间', prop: 'date', width: '260rpx' },
        { label: '备注信息', prop: 'remark', width: '400rpx' }
      ],
      tableData: []
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      const list = [];
      for (let i = 1; i <= 20; i++) {
        list.push({
          id: `100${i}`,
          name: `测试用户${i}`,
          age: 20 + i,
          dept: '研发中心',
          job: '前端工程师',
          date: '2023-11-01',
          remark: i % 3 === 0 ? '这是一个非常长非常长非常长非常长非常长非常长非常长的备注文本，用于测试单元格的自动换行功能和固定列的自动撑高对齐效果。' : '测试文本较短。'
        });
      }
      this.tableData = list;
    }
  }
};
</script>

<style scoped>
.container {
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.table-wrap {
  flex: 1;
  height: 0;
  overflow: auto;
  position: relative;
}

.table-content {
  display: inline-block;
  min-width: 100%;
}

.tr {
  display: flex;
  width: 100%;
  white-space: normal;
  align-items: stretch;
}

.th, .td {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  box-sizing: border-box;
  padding: 10rpx;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
  font-size: 28rpx;
  background-color: #fff;
  line-height: 1.4;
}

.stretch-col {
  flex-grow: 1;
  width: 0 !important;
  min-width: 150rpx;
}

.header-row {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 80rpx;
  background-color: #dcdfe6;
}

.th {
  background-color: #ebeef5;
  font-weight: bold;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  height: 100%;
}

.fixed-col {
  position: sticky;
  left: 0;
  z-index: 5;
  border-right: 1px solid #dcdfe6; 
}

.header-row .fixed-col {
  z-index: 20;
}

.body-row:hover .td {
  background-color: #f5f7fa;
}
</style>

<template>
  <view class="container">
    <view class="table-wrap">
      <view class="table-content">
  
        <view class="tr header-row">
          <view 
            v-for="(col, index) in columns" 
            :key="index" 
            class="th"
            :class="{ 
              'fixed-col': col.fixed,
              'stretch-col': index === columns.length - 1 && !col.fixed 
            }"
            :style="{ width: col.width, left: col.fixed ? '0' : 'auto' }"
          >
            {{ col.label }}
          </view>
        </view>

        <view class="tr body-row" v-for="(row, rowIndex) in tableData" :key="rowIndex">
          <view 
            v-for="(col, colIndex) in columns" 
            :key="colIndex" 
            class="td"
            :class="{ 
              'fixed-col': col.fixed,
              'stretch-col': colIndex === columns.length - 1 && !col.fixed 
            }"
            :style="{ width: col.width, left: col.fixed ? '0' : 'auto' }"
          >
            {{ row[col.prop] }}
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
	/**
	 * label:列名称,
	 * prop: 对应 tableData 中数据的键名 (key)，用于内容映射
	 * width: 宽度
	 * fixed: 是否将该列固定在左侧。目前组件仅支持固定最左侧的第一列。
	 */
    columns: {
      type: Array,
      required: true,
      default: () => []
    },
    tableData: {
      type: Array,
      required: true,
      default: () => []
    }
  }
};
</script>

<style scoped>
.container {
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.table-wrap {
  flex: 1;
  height: 0;
  overflow: auto;
  position: relative;
}

.table-content {
  display: inline-block;
  min-width: 100%;
}

.tr {
  display: flex;
  width: 100%;
  white-space: normal;
  align-items: stretch;
}

.th, .td {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 10rpx;
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
  font-size: 28rpx;
  background-color: #fff;
  line-height: 1.4;
}

.stretch-col {
  flex-grow: 1;
  min-width: 150rpx;
}

.header-row {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 80rpx;
}

.th {
  background-color: #ebeef5;
  font-weight: bold;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  height: 100%;
}

.fixed-col {
  position: sticky;
  left: 0;
  z-index: 5;
  border-right: 1px solid #dcdfe6; 
}

.header-row .fixed-col {
  z-index: 20;
}

.body-row:hover .td {
  background-color: #f5f7fa;
}
</style>