廢話不多說，直接上代碼
<template></template>部分代碼
<!-- 表格 -->
<el-tableid="mytable"v-loading="listLoading"highlight-current-rowrow-key="project_id":data="tableData"border:reload="reload"ref="myTable"style="width: 100%"show-summary:summary-method="getSummaries1":span-method="arraySpanMethod"height="calc(100vh - 275px)":load-more-disabled="disabledLoad"
><el-table-columntype="index"label="序號":row-style="rowstyles"align="center":fixed="true"width="50"/><el-table-columnlabel="項目名稱"prop="project_name":show-overflow-tooltip="true"align="left":fixed="true"width="400"><template slot-scope="{ row }"><span>{{ row.project_name }}</span></template></el-table-column><el-table-columnlabel="項目進度及百分比"prop="progress_percentage"align="center"width="180":show-overflow-tooltip="true"><template slot-scope="{ row }"><el-selectv-if="LockStatus == 0 && row.is_my_project == 1"v-model.lazy="row.progress_percentage"style="width: 175px"><el-option label="招標階段10%" value="招標階段10%"></el-option><el-option label="合同簽訂并開工50%" value="合同簽訂并開工50%"></el-option><el-option label="轉運維100%" value="轉運維100%"></el-option></el-select><span v-else>{{ row.progress_percentage }}</span></template></el-table-column><el-table-columnlabel="合同簽訂金額"prop="contract_signing_amount"align="center"width="100":show-overflow-tooltip="true"><template slot-scope="{ row }"><textareav-if="LockStatus == 0 && row.is_my_project == 1"v-model.lazy="row.contract_signing_amount"rows="1"cols="30"style="width: 98px;border: none;resize: none;margin-top: 7px;text-align: center;"class="pass_input"/><span v-else>{{ row.contract_signing_amount }}</span></template></el-table-column><el-table-columnlabel="備注"prop="info"align="center"width="100":show-overflow-tooltip="true"><template slot-scope="{ row }"><textareav-if="LockStatus == 0 && row.is_my_project == 1"v-model.lazy="row.info"rows="1"style="width: 98px;border: none;resize: none;margin-top: 7px;text-align: center;"class="pass_input"/><span v-else>{{ row.info }}</span></template></el-table-column><el-table-columnfixed="right":label="'操作'"align="center"width="100"><template #default="{ row }"><divclass="table-btn-box"v-if="LockStatus == 0 && row.is_my_project == 1"><el-button type="primary" @click="submitRow(row)">提交</el-button></div></template></el-table-column><divv-if="tableData.length >= 50"slot="append"style="margin-top: 10px;margin-bottom: 10px;text-align: center;font-size: 15px;">{{ content }}</div>
</el-table>其他部分的代碼
data() {return {listLoading: false, // Loading狀態tableData: [], // 表格展示數據allData: [], // 接口返回的所有表格數據currentPage: 1, // 第幾頁pageSize: 50, // 每頁展示多少條reload: 0,}
},
mounted() {// 表格添加滾動事件this.$refs.myTable.bodyWrapper.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {// 銷毀滾動事件this.$refs.myTable.bodyWrapper.removeEventListener('scroll', this.handleScroll)
},
watch: {allData: {deep: true,immediate: true,handler(newValue) {const currentPage = this.currentPage || 1const total = currentPage * this.pageSizethis.tableData = newValue.slice(0, total)}},// 強制刷新變量reload() {this.total = this.allData.lengththis.currentPage = 0this.$refs.myTable.bodyWrapper.scrollTop = 0this.fetchData()this.loop()}
},
methods: {// 滾動加載下一頁，將下一頁數據和之前數據進行累加handleScroll(event) {const { scrollTop, scrollHeight, clientHeight } = event.targetif (Math.ceil(scrollTop) + clientHeight >= scrollHeight) {// 如果數據已全部加載，則跳出if (this.tableData.length == this.total) {return}this.fetchData()}},fetchData() {this.currentPage += 1const start = (this.currentPage - 1) * this.pageSizeconst end = start + this.pageSizeconst newData = this.allData.slice(start, end)this.tableData =this.currentPage == 1 ? newData : this.tableData.concat(newData)},// 如果滾動高度小于可視范圍高度，則繼續加載下一頁，直至可視區域填充滿loop() {this.$nextTick(() => {const { scrollHeight, clientHeight } = this.$refs.myTable.bodyWrapperif (scrollHeight && clientHeight && scrollHeight <= clientHeight) {if (this.tableData.length == this.total) {return }this.fetchData()this.loop()}})},
},
)
