<template>
  <view class="analysis-group">
    <scroll-view scroll-x scroll-y :scroll-into-view="toView">
      <view class="table" :style="tableStyle">
        <view class="table-header">
          <view class="title-cell">
            <view class="row">姓名</view>
            <view class="column">成绩</view>
          </view>
          <view class="content-cell" v-for="column in tableColumn" :key="column.id">
            <view class="cell">{{ column.name }}</view>
          </view>
        </view>
        <view class="table-content" :style="tableStyle">
          <view class="table-content__item" :id="`m-${index}`" v-for="(row, index) in tableData" :key="row.id">
            <view class="title-cell">
              <view class="cell">{{ row.name }}</view>
            </view>
            <view class="content-cell" v-for="column in tableColumn" :key="column.id">
              <view class="cell">{{ row[column.id] }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tableColumn: [
        { id: 'language', name: '语文' },
        { id: 'math', name: '数学' },
        { id: 'english', name: '英语' },
        { id: 'politics', name: '政治' },
        { id: 'biology', name: '生物' },
      ],
      person: ['宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '花容', '柴进', '李逵', '宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '花容', '柴进', '李逵','卢俊义', '吴用', '公孙胜', '关胜', '林冲', '花容', '柴进', '李逵'],
      min: 60,
      max: 100,
      titleWidth: 200,
      contentWidth: 250,
      toView: 'm-10'
    }
  },
  computed: {
    tableStyle() {
      const width = this.titleWidth + this.tableColumn.length * this.contentWidth;
      return `width: ${width}rpx`;
    },
    tableData() {
      const tableData = this.person.map((name, index) => {
        const obj = this.tableColumn.reduce((result, item) => {
          result[item.id] = Math.ceil(Math.random() * (this.max - this.min) + this.min);
          return result;
        }, {});
        return {
          id: String(index + 1),
          name,
          ...obj
        };
      });
      console.log(tableData);
      // [{"id":1,"name":"宋江","language":90,"math":69,"english":98,"politics":89,"biology":85}]
      return tableData;
    }
  }
}
</script>
<style lang="scss" scoped>
.analysis-group {
  width: 100vw;
  height: 100vh;
  scroll-view {
    width: 100vw;
    height: 100vh;
  }
}
$title-width: 200rpx;
$content-width: 250rpx;
$border-color: #E4E4E4;
$border: 1rpx solid $border-color;
$white: #FFFFFF;
$title-color: #F0F2F5;
.table {
  display: table;
  .table-header {
    // display: table-row;
    font-weight: bold;
    background-color: $title-color;
    position: sticky;
    top: 0;
    z-index: 2;
    .title-cell {
      background-image: linear-gradient(to top right, transparent 48%, $border-color, transparent 52%);
      border: $border;
      position: relative;
      position: sticky;
      left: 0;
      z-index: 1;
      .row {
        position: absolute;
        right: 10rpx;
        top: 5rpx;
      }
      .column {
        position: absolute;
        left: 10rpx;
        bottom: 5rpx;
      }
    }
    .content-cell {
      border-top: $border;
      border-bottom: $border;
      border-right: $border;
    }
  }
  .table-content {
    &__item {
      display: table-row;
      .title-cell {
        border-left: $border;
        border-right: $border;
        border-bottom: $border;
        position: sticky;
        left: 0;
        z-index: 1;
      }
      .content-cell {
        border-bottom: $border;
        border-right: $border;
      }
    }
  }
  .title-cell {
    display: table-cell;
    width: $title-width;
    background-color: $title-color;
  }
  .content-cell {
    display: table-cell;
    width: $content-width;
  }
  .cell {
    padding: 10rpx;
    line-height: 1.6;
  }
}
</style>

效果图：