vue 使用iView组件中的Table实现定时自动滚动

封装Table

要在css中设置table的高度，使数据过多时出现滚动条，将纵向设置为overflow-y: auto;横向设置隐藏 overflow-x: hidden;

<template>
  <div class="table_container">
    <Table :loading="tableLoading" :columns="columns" :data="dataList" ref="tableL"></Table>
  </div>
</template>

<script>
export default {
  name: "tableList",
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    dataList: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      showContentHeight: 0,
      tableBodyHeight: 0,
      tableLoading: false,
    }
  },
  methods: {
    //动态滚动
    dynamicScroll() {
      let that = this
      this.$nextTick(() => {
        clearInterval(this.timer)

        const table = this.$refs.tableL;
        let tableBody = table.$el.__vue__.$refs.body;

        if (tableBody) {
          let showContentHeight = tableBody.offsetHeight;

          let tableBodyHeight = tableBody.scrollHeight;

          that.showContentHeight = showContentHeight
          that.tableBodyHeight = tableBodyHeight
          if(tableBodyHeight > showContentHeight) {
            that.timerScroll()
          }
        }
      });
    },
    //定时滚动
    timerScroll() {
      let that = this
      const tmpTimer = setInterval(() => {
        const table = that.$refs.tableL;
        let tableBody = table.$el.__vue__.$refs.body;
        if (tableBody) {
          let canScrollHeight = that.tableBodyHeight - that.showContentHeight
          let scrollTop = tableBody.scrollTop
          console.log('scrollTop', scrollTop)
          scrollTop += that.showContentHeight;
          if(scrollTop > canScrollHeight) {
            scrollTop = canScrollHeight
          }

          tableBody.scrollTop = scrollTop;
        }
      }, 5 * 1000);

      this.timer = tmpTimer

      this.$once("hook:beforeDestroy", () => {
        clearInterval(tmpTimer);
      });
    }
  },
}
</script>

<style scoped lang="less">
.table_container {
  height: 100%;
}

.table_container /deep/ .ivu-table-wrapper {
  height: 100%;
  border: none;
  border-bottom: 0;
  border-right: 0;
}

.table_container /deep/ .ivu-table-body {
  height: calc(100% - 40px);	//减掉表头的高度
  overflow-x: hidden;
  overflow-y: auto;
}

.table_container /deep/ .ivu-table-column-center {
  background-color: #39698D;
  color: white;
}

.table_container /deep/ tbody .ivu-table-column-center {
  color: #89D5EA;
}

.table_container /deep/ .ivu-table {
  background-color:rgba(255,255,255, 0);
  color: #89D5EA;
}

.table_container /deep/ .ivu-table td {
  background-color:rgba(255,255,255, 0);
  border-bottom: 1px solid #496893;
}

.table_container /deep/ .ivu-table-tip {
  color: #89D5EA;
}

.table_container /deep/ .ivu-table:before,.table_container /deep/ .ivu-table:after {
  background-color: rgba(255,255,255, 0);
}

.table_container /deep/ .ivu-table th {
  border-bottom: none;
}


/** .ivu-table-body 滚动条样式*/
.table_container /deep/ .ivu-table-body::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 3px;
}
.table_container /deep/ .ivu-table-body::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  height: 20px;
  -webkit-box-shadow: inset 0 0 5px black;
}
.table_container /deep/ .ivu-table-body::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #6B90B6;
  border-radius: 10px;
  background: #ffffff;
}
</style>

在引用组件的页面调用定时滚动方法

<template>
  <div class="layout">
    <table-list ref="tableList" :columns="columns" :data-list="warehouseList"/>
  </div>
</template>

<script>
import { columns } from './config'
import tableList from "@/components/tableList";

export default {
  name: "board",
  components: {
    tableList,
  },
  data () {
    return {
      columns,
      warehouseList: [],
      resultData: {},
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getWarehouseList({}).then(res => {
        console.log('getWarehouseList', res)
        if(res.success) {
          this.resultData = res.result
          this.warehouseList = res.result.warehouseList
          const tableList = this.$refs.tableList;
           //动态滚动
          tableList.dynamicScroll()
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.layout {
  width: 100%;
  height: 100%;
  background:url("../../../assets/prod_board.png") no-repeat center -2px;
  background-size: 100% 100%;
  color: #fff;
}
</style>