vue+element（表头不动，内容滚动，附带改变某个单元格背景颜色）

有单独看改变单元格背景的小伙伴直接看下面

组件页面

<template>
  <div>
    <el-table
        :data="newData"
        border
        :cell-style="cellStyle"
        align="center"
        size="mini"
        stripe
        id="dbM">
      <el-table-column
          :key="index"
          v-for="(item,index) in menuData"
          :label="item.name"
          :width="item.width"
          :show-overflow-tooltip="true"
          :prop="item.prop">
        <!--todo 二级表头-->
      </el-table-column>
      <slot name="footerTable"></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'DtSrcoll',
  props: {
    newData: Array, //表格数据
    menuData: Array, //表格行内容
    cellStyle: { //页面需要显示的行数
      type: Function,
      default: 4
    },
    lineHeight: { //页面需要显示的行数
      type: Number,
      default: 4
    },
    rowTime: { //每一行滚动切换等待的时间（毫秒）
      type: Number,
      default: 1500
    },
    duration: { //过渡时间
      type: Number,
      default: 500
    },
    tableHeight: { //行高
      type: Number,
      default: 40
    },
    isClear: { //数据滚动到最后一行是否停止滚动
      type: Boolean,
      default: false
    },
    isAgain: { // 数据滚动到最后一行是否重新开始滚动
      type: Boolean,
      default: false
    },
    isScroll: { //是否允许内容滚动
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      active: 0,
      timer: ''
    }
  },
  mounted() {
    let _this = this
    this.$nextTick(() => {
      let elwrapper = document.getElementsByClassName("el-table__body-wrapper")[0];
      elwrapper.style.height = this.lineHeight * this.tableHeight + 'px'
      let elBody = document.getElementsByClassName("el-table__body")[0];
      let elRow = document.getElementsByClassName('el-table__row');
      for (let node of elRow) {
        node.style.height = this.tableHeight + 'px'
      }
      elBody.style.top = 0;
      elBody.style.transactionDuration = this.duration + 'ms'
      if (_this.isScroll) {
        _this.timer = setInterval(function () {
          if (_this.active < parseInt(_this.newData.length) - parseInt(_this.lineHeight)) {
            _this.active += 1
            elBody.style.top = parseInt(elBody.style.top) - parseInt(_this.tableHeight) + 'px'
          } else {
            if (this.isClear) {
              clearInterval(this.timer)
            }
            if (_this.isAgain) {
              _this.active = 0
              elBody.style.top = 0
            } else {
              clearInterval(_this.timer)
            }
          }
        }, _this.rowTime)
      }
    });
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style>

#dbM .el-table__body {
  width: 100% !important;
  position: absolute;
  transition: all 500ms linear;
}

</style>

调用（data tableData里面的内容需要多复制几份出来看效果）

<template>
  <div class="repairTable">
    <div class="Tables">
      <dt-srcoll :newData="tableData"
                 :menuData="tableLabel"
                 style="text-align: center"
                 :lineHeight="8"
                 :tableHeight="50"
                 class="table">

      </dt-srcoll>
    </div>
  </div>
</template>

<script>
import DtSrcoll from "../detailsOfProductionLine/DtSrcoll";

export default {
  name: "repairTable",
  components: {
    DtSrcoll
  },
  data() {
    return {
      tableData: [
//这里的内容需要多复制几条出来看效果哦
        {
          title: "12352YCY",
          num1: "",
          num2: "",
          num3: "",
          num4: "5",
          num5: "",
          num6: "",
          num7: "",
          num8: "",
          num9: "",
          num10: "",
          num11: "4",
          num12: "",
          num13: "",
          num14: "",
          num15: "",
          num16: "",
          num17: "5",
          num18: "",
          num19: "",
          num20: "",
          num21: "1",
          num22: "",
          num23: "2",
          num24: "",
        },
      ],
      // 子组件的表头数据
      tableLabel: [
        {name: "", width: "100px", prop: "title"},
        {name: "1:00", width: "58px", prop: "num1"},
        {name: "2:00", width: "58px", prop: "num2"},
        {name: "3:00", width: "58px", prop: "num3"},
        {name: "4:00", width: "58px", prop: "num4"},
        {name: "5:00", width: "58px", prop: "num5"},
        {name: "6:00", width: "58px", prop: "num6"},
        {name: "7:00", width: "58px", prop: "num7"},
        {name: "8:00", width: "58px", prop: "num8"},
        {name: "9:00", width: "58px", prop: "num9"},
        {name: "10:00", width: "75px", prop: "num10"},
        {name: "11:00", width: "75px", prop: "num11"},
        {name: "12:00", width: "75px", prop: "num12"},
        {name: "13:00", width: "75px", prop: "num13"},
        {name: "14:00", width: "75px", prop: "num14"},
        {name: "15:00", width: "75px", prop: "num15"},
        {name: "16:00", width: "74px", prop: "num16"},
        {name: "17:00", width: "74px", prop: "num17"},
        {name: "18:00", width: "74px", prop: "num18"},
        {name: "19:00", width: "74px", prop: "num19"},
        {name: "20:00", width: "74px", prop: "num20"},
        {name: "21:00", width: "74px", prop: "num21"},
        {name: "22:00", width: "74px", prop: "num22"},
        {name: "23:00", width: "70px", prop: "num23"},
        {name: "24:00", width: "70px", prop: "num24"},
      ],
    }
  }
}
</script>
<style>
.Tables .is-leaf {
  height: 100px !important;
}
</style>
<style scoped>


.table {
  width: 1730px;
  position: relative;
  top: -30px !important;
}
</style>

 截止为此上面的可以实现滚动表格

（下面标记一下如果想给某个table背景色修改）

 <dt-srcoll :newData="tableData"
                 :menuData="tableLabel"
                 style="text-align: center"
                 :lineHeight="8"
                 :tableHeight="50"
                 // :cellStyle="cellStyle" 用来动态设置背景，我这句注释放到页面需要删除
                 :cellStyle="cellStyle"
                 class="table">

      </dt-srcoll>

methods里面 添加方法

 methods: {
    cellStyle({row, columnIndex}) {
      for (let i = 1; i < 25; i++) {
        if (columnIndex == i) {
          let nums = 'num' + i
          //row[nums] == '4'是格子内容等于4的时候背景颜色修改
          if (row[nums] == '4') {
            return 'background:red !important; border-radius:3px;width:15px'
          } else {
            return
          }
        }
      }
    },
  },

这种背景色是设置整个表格的

----------下面说一种设置一列的（效果就是）

 cellStyle({row, columnIndex}) {
    //columnIndex 表示第几列   row.ProductionSurplus  ProductionSurplus 表示你要关注的字段
      if (columnIndex === 7) {
        if (row.ProductionSurplus == '150') {
          return 'background: #DD0D0D !important'
        } else
          return 
      }
      return 
    }
  },

----------6.28 这个表格组件一个页面只能引用一次。多次则出问题，解决办法

https://blog.csdn.net/m0_49789433/article/details/118015726

在我的另一个文章最下方已写解决办法