table 无限滚动列表

<div class="content">
      <el-table
        ref="scroll_table"
        height="150"
        solt="append"
        :data="tableData"
        @cell-mouse-enter="mouseEnter"
        @cell-mouse-leave="mouseLeave"
        class="table"
      >
        <el-table-column
          v-for="(item, index) in dataColumList"
          :key="index + 'i'"
          :label="item.label"
          :prop="item.prop"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <div  class="box" :class="scope.row.serialNumber === 1 ? 'box-1' : scope.row.serialNumber === 2 ? 'box-2' : scope.row.serialNumber === 3 ? 'box-3' : 'box-4'"  v-if="item.prop === 'serialNumber'">{{scope.row.serialNumber}}</div>
            <div v-else>
              {{scope.row[item.prop]}}
              <span v-if="item.prop === 'excludeTaxOrderAmountCount'">万元</span>
              <span v-if="item.prop === 'subTotalNetWeightCount'">吨</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

列表滚动方法

dataColumList: [
        { label: '', prop: 'serialNumber' },
        { label: '大区', prop: 'saleDistrict' },
        { label: '区域', prop: 'district' },
        { label: '下达金额', prop: 'excludeTaxOrderAmountCount' },
        { label: '下达重量', prop: 'subTotalNetWeightCount' }
      ],
autoPlay: true,
scrolltimer: null

 mounted() {
    this.initData()
  },
  beforeDestroy() {
    this.startMove(true)
  },
  methods: {
    handleChange() {
      this.initData()
    },
    initData() {
      const params = {
        statisticsType: this.statisticsType,
        oneOrgId: this.$store.getters.organizationInfo.oneOrganizationId
      }
      this.axios(params).then(({ data }) => {
        this.tableData = data
        this.startMove()
      })
    },
    mouseEnter() {
      this.autoPlay = false
    },
    mouseLeave() {
      this.autoPlay = true
    },
    startMove(stop) {
      const table = this.$refs.scroll_table
      const divData = table.$refs.bodyWrapper
      if (stop) {
        window.clearInterval(this.scrolltimer)
      } else {
        this.scrolltimer = window.setInterval(() => {
          if (this.autoPlay) {
            divData.scrollTop += 1
            if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
              divData.scrollTop = 0
            }
          }
        }, 30) // 滚动速度
      }
    }
  }

样式

.table{
  width: 100%;
  color: #99B3C8;
  margin-top: 4px;
}
/deep/.el-table{
  background-color: transparent !important;
}
/deep/.el-table::before{
  display: none !important;
}
/deep/.el-table th{
  line-height: 20px;
  background:rgba(13,48,99,1);
  color: #99B3C8;
}
/deep/.el-table tr {
  background-color: transparent !important;
}
/deep/.el-table td{
  padding: 6px 0px !important;
  border-bottom: 1px solid transparent !important;
}
/deep/.el-table--scrollable-y .el-table__body-wrapper{
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 1px !important;
  } //支持滚动
}
/deep/.el-table th.is-leaf{
  border-bottom: 1px solid transparent !important;
}
/deep/.el-table--mini th{
  padding: 2px 0px !important;
}