element 表格滚动时首行合计固定 （demo组件简单易懂 复制可用）

demo效果展示

<template>
  <!-- 后台返回数据大于1条的时候在返回合计 -->
  <div :id="tableData && tableData.length > 1 ? 'Totalstyle' : ''">
    <el-table
      :data="tableData"
      border
      style="width: 60%"
      height="200"
      :row-class-name="tableRowClassName"
      :show-summary="tableDataNew.length > 1"
      :summary-method="getSummaries"
    >
      <el-table-column
        label=" "
        prop="RowNumber"
        width="40"
        align="center"
        class-name="totalclassname"
      >
      </el-table-column>
      <el-table-column prop="data" align="center" label="标题" width="180"> </el-table-column>
      <el-table-column prop="data1" align="center" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="data2" align="center" label="技能" width="180"> </el-table-column>
      <el-table-column prop="data3" align="center" label="地址"> </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.PageIndex"
      :page-sizes="$store.getters.pageSizes"
      :page-size="form.PageSize"
      layout="total, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

export default {
  name: 'test',
  data() {
    return {
      tableDataNew: [],
      tableData: [],
      total: 10,
      form: {},
      listdata: [
        {
          data: '合计',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: ''
        },
        {
          data: '11111111',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 1
        },
        {
          data: '2222222',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 2
        },
        {
          data: '33333333',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 3
        },
        {
          data: '4444444',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 4
        },
        {
          data: '555555',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 5
        },
        {
          data: '666666',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 6
        },
        {
          data: '777777',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 7
        },
        {
          data: '888888',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 8
        },
        {
          data: '99999',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 9
        },
        {
          data: '10101010101010101010',
          data1: 'aaaaaaaaaaaaaaaaaaaaaaa',
          data2: 'bbbbbbbbbbbbbbbbbbbbb',
          data3: 'cccccccccccccccccc',
          RowNumber: 10
        }
      ]
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {},
    list() {
      //调接口拿数据,替换掉this.listdata
      var newdata = [] //
      for (let index = 0; index < this.listdata.length; index++) {
        const element = this.listdata[index]
        if (element.data != '合计') {
          newdata.push(element)
        }
      }
      this.tableData = newdata
      this.tableDataNew = JSON.parse(JSON.stringify(this.listdata))
    },
    //合计行背景色
    tableRowClassName({ row }) {
      if (row.data == '合计') {
        return 'summary-row'
      }
      return ''
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      var property = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = data.length + 1
          return
        }
        property.push(column.property)
      })
      if (this.tableDataNew && this.tableDataNew.length > 0) {
        let data = this.tableDataNew[0]
        for (let item of property) {
          if (data[item] == 0 || data[item] == null) {
            data[item] = '-'
          }
          sums.push(data[item])
        }
      }
      return sums
    }
  }
}

<style>
	.summary-row {
	  background-color: #bfe5f9;
	  color: #0e2d5f;
	}
	//合计样式
	#Totalstyle {
	  .el-table__body-wrapper {
	    overflow-y: auto !important;
	    position: relative;
	    margin-top: 30px;
	  }
	  .el-table__footer-wrapper {
	    top: 30px;
	    position: absolute;
	    .totalclassname {
	      .cell {
	        display: none;
	      }
	    }
	  }
	  .el-table__header-wrapper tbody td,
	  .el-table__footer-wrapper tbody td {
	    background-color: #bfe5f9 !important;
	    color: #0e2d5f;
	  }
	}
</style>