element-ui中table表格合并后,狐火浏览器上滚动条滚动有问题?

Question

element-ui2X中<el-table>表格合并,在数据多的时候滚动下拉,但是在火狐浏览器上会出现下拉滚动异常现象,在chrome浏览器上也存在，但是不明显

<template>
  <div class="report-table">
    <el-table
      id="elTable"
      size="mini"
      key="table1"
      border
      style="width: 200px"
      height="100%"
      max-height="666px"
      ref="table1"
      :data="reportTableData"
      table-layout="fixed"
      :span-method="objectSpanMethod"
      :header-cell-style="{
        fontWeight: '700',
        fontSize: '16px',
        background: 'rgba(245, 245, 245,0.5)',
        color: '#000000',
        height: '30px',
        border: '1px solid rgba(241, 241, 241)',
      }"
    >
      <el-table-column
        v-for="(n, i) in columnList"
        :key="n.dataIndex"
        :fixed="n.fixed"
        :prop="n.dataIndex"
        :label="n.label"
        :min-width="n.width"
        align="center"
      >
        <!-- <template v-if="n.childs">
          <el-table-column
            v-for="m in n.childs"
            :key="m.dataIndex"
            :fixed="m.fixed"
            :prop="m.dataIndex"
            :label="m.label"
            :min-width="m.width"
            align="center"
          ></el-table-column>
        </template> -->
        <template slot-scope="scope">
          <div>
            <span v-if="i < 3">{{ scope.row[n.dataIndex] || "--" }}</span>
            <span v-else>{{
              scope.row.valueList
                ? scope.row.valueList.find((m) => {
                    return m.code === n.dataIndex;
                  }).label === 0
                  ? 0
                  : scope.row.valueList.find((m) => {
                      return m.code === n.dataIndex;
                    }).label
                  ? scope.row.valueList.find((m) => {
                      return m.code === n.dataIndex;
                    }).label
                  : "--"
                : "--"
            }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ReportTable",
  props: {
    timeList: {
      type: Array,
      default: () => [],
    },
    dateType: {
      type: [String, Number],
      default: "0",
    },
    reportData: {
      type: Array,
      default: () => [],
    },
    objType: {
      //设备还是系统
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      baseColumnList: [
        {
          width: 150,
          label: "对象名称",
          metricsName: "对象名称",
          fixed: "left",
          dataIndex: "objName",
        },
        {
          width: 150,
          label: "测点名称",
          metricsName: "测点名称",
          fixed: "left",
          dataIndex: "pointName",
        },
        {
          width: 150,
          label: "单位",
          metricsName: "单位",
          fixed: "left",
          dataIndex: "unit",
        },
      ],
      reportTableData: [],
      columnList: [],
      mergeArr: [],
    };
  },
  watch: {
    timeList: {
      deep: true,
      handler(newVal) {
        this.columnList = [];
        this.reportTableData = [];
        if (newVal && newVal.length == 2 && newVal[0] && newVal[1]) {
          this.dealColumnList();
        }
        this.$refs.table1.doLayout();
      },
    },
    reportData: {
      deep: true,
      handler(newVal) {
        this.mergeArr = [];
        this.$refs.table1.doLayout();
        if (newVal) {
          let arr = [];
          newVal.forEach((n) => {
            if (n && n.monitorPointBoList && n.monitorPointBoList.length > 0) {
              n.monitorPointBoList.forEach((m) => {
                m.objName = n.objName;
                arr.push(m);
              });
            } else {
              arr.push({ objName: n.objName });
            }
          });
          this.reportTableData = arr;
          this.getSpanArr(this.reportTableData);
        }
      },
    },
  },
  mounted() {},
  methods: {
    dealColumnList() {
      if (
        this.timeList &&
        this.timeList.length === 2 &&
        this.timeList[0] &&
        this.timeList[1]
      ) {
        if (this.timeList[0] == this.timeList[1]) {
          let obj = {
            label: this.timeList[0],
            width: 200,
            dataIndex: this.timeList[0],
          };
          this.columnList = [...this.baseColumnList, obj];
        } else {
          let arr = [];
          this.getDateRange(this.timeList).forEach((n) => {
            let obj = {
              label: n,
              width: 200,
              dataIndex: n,
            };
            arr.push(obj);
          });
          this.columnList = [...this.baseColumnList, ...arr];
        }
      } else {
        this.columnList = [...this.baseColumnList];
      }
    },
    getDateRange(arrTime) {
      let daysArray = [];
      if (this.dateType === 4) {
        let start = this.$moment(arrTime[0]);
        let end = this.$moment(arrTime[1]);
        while (start <= end) {
          daysArray.push(start.format("YYYY-MM-DD HH"));
          start.add(1, "hours");
        }
      } else if (this.dateType === 3) {
        let start = this.$moment(arrTime[0]);
        let end = this.$moment(arrTime[1]);
        while (start <= end) {
          daysArray.push(start.format("YYYY-MM-DD"));
          start.add(1, "days");
        }
      } else if (this.dateType === 2) {
        let start = this.$moment(arrTime[0]);
        let end = this.$moment(arrTime[1]);
        while (start <= end) {
          daysArray.push(start.format("YYYY-MM"));
          start.add(1, "month");
        }
      } else if (this.dateType === 1) {
        let start = this.$moment(arrTime[0]);
        let end = this.$moment(arrTime[1]);
        while (start <= end) {
          daysArray.push(start.format("YYYY"));
          start.add(1, "year");
        }
      }
      return daysArray;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (this.mergeArr[rowIndex]) {
          return [this.mergeArr[rowIndex], 1];
        } else {
          return [0, 0];
        }
      }
    },
    getSpanArr(data) {
      let count = 0; // 用来记录需要合并行的起始位置
      data.forEach((n, i) => {
        if (i === 0) {
          this.mergeArr.push(1);
        } else {
          if (data[i].objName === data[i - 1].objName) {
            this.mergeArr[count] += 1;
            this.mergeArr.push(0);
          } else {
            count = i;
            this.mergeArr.push(1);
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.report-table {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; /*滚动条宽度*/
    height: 6px; /*滚动条高度*/
  }
  /*定义滚动条轨道 内阴影+圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px rgba(241, 241, 241); /*滚动条的背景区域的内阴影*/
    border-radius: 4px; /*滚动条的背景区域的圆角*/
    background-color: rgba(241, 241, 241); /*滚动条的背景颜色*/
  }
  /*定义滑块 内阴影+圆角*/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px rgba(120, 120, 120) inset; /*滚动条的内阴影*/
    border-radius: 4px; /*滚动条的圆角*/
    background-color: rgba(120, 120, 120); /*滚动条的背景颜色*/
  }
  // /deep/.el-table__body-wrapper {
  //   height: calc(100% - 35px) !important;
  // }
  /deep/.el-table__fixed {
    height: calc(100% - 4px) !important;
  }
}
</style>

希望解决滚动异常问题