快捷導(dǎo)航

vue 使用iView組件中的Table實現(xiàn)定時自動滾動效果

更新時間：2024年05月25日 12:13:01 作者：小鯉魚ya

要在css中設(shè)置table的高度,使數(shù)據(jù)過多時出現(xiàn)滾動條,將縱向設(shè)置為overflow-y: auto;橫向設(shè)置隱藏 overflow-x: hidden,接下來通過本文介紹vue使用iView組件中的Table實現(xiàn)定時自動滾動效果,需要的朋友可以參考下

封裝Table

要在css中設(shè)置table的高度，使數(shù)據(jù)過多時出現(xiàn)滾動條，將縱向設(shè)置為overflow-y: auto;橫向設(shè)置隱藏 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: {
    //動態(tài)滾動
    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; /*高寬分別對應(yīng)橫豎滾動條的尺寸*/
  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>

在引用組件的頁面調(diào)用定時滾動方法

<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;
           //動態(tài)滾動
          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>

到此這篇關(guān)于vue 使用iView組件中的Table實現(xiàn)定時自動滾動的文章就介紹到這了,更多相關(guān)vue Table定時自動滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: