【VUE】el-table表格 实现滚动到底部加载更多数据
废话不多说，直接上代码<template></template>部分代码
<!-- 表格 -->
<el-table
id="mytable"
v-loading="listLoading"
highlight-current-row
row-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-column
type="index"
label="序号"
:row-style="rowstyles"
align="center"
:fixed="true"
width="50"
/>
<el-table-column
label="项目名称"
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-column
label="项目进度及百分比"
prop="progress_percentage"
align="center"
width="180"
:show-overflow-tooltip="true"
>
<template slot-scope="{ row }">
<el-select
v-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-column
label="合同签订金额"
prop="contract_signing_amount"
align="center"
width="100"
:show-overflow-tooltip="true"
>
<template slot-scope="{ row }">
<textarea
v-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-column
label="备注"
prop="info"
align="center"
width="100"
:show-overflow-tooltip="true"
>
<template slot-scope="{ row }">
<textarea
v-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-column
fixed="right"
:label="'操作'"
align="center"
width="100"
>
<template #default="{ row }">
<div
class="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>
<div
v-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 || 1
const total = currentPage * this.pageSize
this.tableData = newValue.slice(0, total)
}
},
// 强制刷新变量
reload() {
this.total = this.allData.length
this.currentPage = 0
this.$refs.myTable.bodyWrapper.scrollTop = 0
this.fetchData()
this.loop()
}
},
methods: {
// 滚动加载下一页，将下一页数据和之前数据进行累加
handleScroll(event) {
const { scrollTop, scrollHeight, clientHeight } = event.target
if (Math.ceil(scrollTop) + clientHeight >= scrollHeight) {
// 如果数据已全部加载，则跳出
if (this.tableData.length == this.total) {
return
}
this.fetchData()
}
},
fetchData() {
this.currentPage += 1
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
const 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.bodyWrapper
if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
if (this.tableData.length == this.total) {
return
}
this.fetchData()
this.loop()
}
})
},
},
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]