封裝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 = thisthis.$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 = showContentHeightthat.tableBodyHeight = tableBodyHeightif(tableBodyHeight > showContentHeight) {that.timerScroll()}}});},//定時滾動timerScroll() {let that = thisconst tmpTimer = setInterval(() => {const table = that.$refs.tableL;let tableBody = table.$el.__vue__.$refs.body;if (tableBody) {let canScrollHeight = that.tableBodyHeight - that.showContentHeightlet scrollTop = tableBody.scrollTopconsole.log('scrollTop', scrollTop)scrollTop += that.showContentHeight;if(scrollTop > canScrollHeight) {scrollTop = canScrollHeight}tableBody.scrollTop = scrollTop;}}, 5 * 1000);this.timer = tmpTimerthis.$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.resultthis.warehouseList = res.result.warehouseListconst 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>