vue+elementui表格

加固定列 fixed

滚动条在fixed列下不能拖动

增加合计行：show-summary

将滚动条固定在合计行底部

由于不同浏览器滚动条高度不同，使用css判断浏览器类型，调用不同的样式

/* Target Safari and Chrome */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      /*table {*/
        /*color: blue;*/
      /*}*/
      .el-table--scrollable-x {
        .el-table__fixed {
          margin-bottom: 8px;
        }
      }
    }
    /* Target IE 10 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      /*table {*/
        /*color: red;*/
      /*}*/
      .el-table--scrollable-x {
        .el-table__fixed {
          margin-bottom: 15px;
        }
      }
    }

完整代码

<template>
  <div id="formalResNegHeadman" class="content_bgibox">
    <!--评-->
    <div class="setup_bigbox">
      <div class="proinfobox">
        <span class="line_bigbox"></span>
        <span class="title_bigbox">标题</span>
      </div>
    </div>
    <div class="score_bigbox" >
      <el-table
        ref="somTable"
        :data="tableDataScore"
        show-summary
        border
        style="width: 100%" max-height="600">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          fixed
          align="center">
        </el-table-column>
        <el-table-column
          prop="itemName"
          label="因素"
          width="150"
          fixed
          show-overflow-tooltip
          align="left">
        </el-table-column>
        <el-table-column
          prop="itemDesc"
          label="标准"
          width="200"
          fixed
          show-overflow-tooltip
          align="left">
        </el-table-column>
        <el-table-column
          prop="lessItemScore"
          label="最低分"
          width="70"
          fixed
          align="center">
        </el-table-column>
        <el-table-column
          prop="itemScore"
          label="最高分"
          width="70"
          fixed
          align="center">
        </el-table-column>
        <template v-for="(item,key) in tabScoreTitle" >
          <el-table-column :prop="item.column_name"
                           width="200"
                           :label="item.column_comment"
                           :key="key"
                           align="left">
            <template slot-scope="scope">
              <el-input v-model="scope.row[item.column_name]"
                  size="mini"
                  type="text"
                  @change="handleScore(scope)"
                  style="font-size: 15px;" :disabled="subStatus">
              </el-input>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <!--提交按钮-->
      <div class="sub_btnbigbox">
        <el-button type="primary" class="sub_btn" @click="submitBtn" v-if="!orderStatus">提 交</el-button>
        <el-button type="primary" class="sub_btn" disabled v-else>已提交</el-button>
      </div>
      <!--提交按钮-->
    </div>
    <!--评分-->
  </div>
</template>
<script>
import { consultingReview } from '@/api'
export default {
  data () {
    return {
      pageSize: 1000, // 每页展示条数
      pageNo: 0,
      // 表头动态获取
      tabScoreTitle: [],
      // 每个评审项目的不同数据
      tableDataScore: [],
      checkList: [], // 评审数据
      orderStatus: false, // 命令状态
      reviewType: '',
      subStatus: false, // 是否可以输入
      scaleDecimal: this.$store.getters.authUser.scaleDecimal
    }
  },
  activated () {
    this.doLayout()
  },
  methods: {
    doLayout () {
      this.$nextTick(() => {
        this.$refs.somTable.doLayout()
      })
    },
    handleScore (scope) { // 录入分数
      let tenderId = scope.column.property // 投标人id
      let id = 0
      // let itemNameId = scope.row.itemNameId
      let lessItemScore = scope.row.lessItemScore
      let score = scope.row[tenderId]
      let totalScore = scope.row.itemScore
      // 评分小数位
      let flagRex = new RegExp('^0$|^0$|^(-)?[1-9]\\d{0,15}$|^(-)?[1-9]\\d{0,15}\\.{1}\\d{1,' + this.scaleDecimal + '}$|^(-)?0\\.{1}\\d{1,' + this.scaleDecimal + '}$')
      if (flagRex.test(score)) {
        if (score > totalScore) {
          this.$message({
            type: 'warning',
            message: '不能超过满分'
          })
          return
        }
        if (lessItemScore > score) {
          this.$message({
            type: 'warning',
            message: '不能低于最低分'
          })
          return
        }
        this.checkList.map((item) => {
          if (item.checkItemId === scope.row.itemNameId && item.tenderId.toString() === scope.column.property) {
            id = item.objectId
          }
        })
        let params = {
          checkScore: score,
          objectId: id
        }
        consultingReview.preservationUnqualified(params).then((res) => {
          this.checkList.map((its) => {
            if (its.objectId === params.objectId) {
              its.checkScore = params.checkScore
            }
          })
        })
      } else {
        this.$message({
          type: 'warning',
          message: '得分不能超过' + this.scaleDecimal + '位小数'
        })
      }
    },
    // 点击切换
    chooseAddr (index) {
      this.addrSelected = index
    },
    reviewResultsLists () { // 初始化数据
      let url = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        checkType: this.reviewType
      }
      consultingReview.reviewResultsList2(url).then((res) => {
        this.tabScoreTitle = res.data.ResultTitle
        this.tableDataScore = res.data.ResultList
        this.checkList = res.data.checkList
        this.orderStatus = res.data.isHide === '1'
        this.subStatus = res.data.isHide === '1'
      })
      this.doLayout()
    },
    checkSample () {
      let reResult = false
      this.checkList.map((its) => {
        if (its.checkScore === null || its.checkScore === '') {
          console.log('未录入记录', its)
          reResult = true
        }
      })
      return reResult
    },
    submitBtn () {
      let url = {
        checkTypeId: this.reviewType
      }
      let backV = this.checkSample()
      if (!backV) {
        consultingReview.rationalitySubmit(url).then(() => {
          this.reviewResultsLists()
        })
      } else {
        this.$message({
          type: 'warning',
          message: '还未全部录入，请继续录入'
        })
      }
    },
    handleType () {
      this.reviewType = this.$route.params.type
    },
    init () {
      this.handleType()
      this.reviewResultsLists()
    }
  },
  mounted () {
    this.init()
    const a = this.$refs.somTable.$refs.footerWrapper
    a.addEventListener('scroll', () => {
      const left = a.scrollLeft
      this.$refs.somTable.$refs.bodyWrapper.scrollLeft = left
    })
  }
}
</script>
<style lang="less">
  #formalResNegHeadman{
    margin-top: 20px;
    .score_bigbox{
      padding:20px;
    }
    .el-table--scrollable-x .el-table__body-wrapper {
      overflow-x: hidden !important;
    }
    .el-table__body-wrapper {
      overflow-x: hidden !important;
    }
    .el-table__footer-wrapper {
      overflow-x: auto !important;
    }
    /*.el-table__fixed {*/
      /*margin-bottom: 14px;*/
    /*}*/

   /* Target Safari and Chrome */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      /*table {*/
        /*color: blue;*/
      /*}*/
      .el-table--scrollable-x {
        .el-table__fixed {
          margin-bottom: 8px;
        }
      }
    }
    /* Target IE 10 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      /*table {*/
        /*color: red;*/
      /*}*/
      .el-table--scrollable-x {
        .el-table__fixed {
          margin-bottom: 15px;
        }
      }
    }
  }
</style>

感谢灵感来源：

在css中判断浏览器类型的5大方法盘点

ElementUI el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题 

ElementUI el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题