废话不多说，直接上代码
<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()}})},
},
)
