ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【VUE】el-table表格 实现滚动到底部加载更多数据 [打印本页]

---

作者: 莱莱    时间: 2024-6-10 10:07
标题: 【VUE】el-table表格 实现滚动到底部加载更多数据
废话不多说，直接上代码
<template></template>部分代码

1. <!-- 表格 -->
2. <el-table
3.   id="mytable"
4.   v-loading="listLoading"
5.   highlight-current-row
6.   row-key="project_id"
7.   :data="tableData"
8.   border
9.   :reload="reload"
10.   ref="myTable"
11.   style="width: 100%"
12.   show-summary
13.   :summary-method="getSummaries1"
14.   :span-method="arraySpanMethod"
15.   height="calc(100vh - 275px)"
16.   :load-more-disabled="disabledLoad"
17. >
18.   <el-table-column
19.     type="index"
20.     label="序号"
21.     :row-style="rowstyles"
22.     align="center"
23.     :fixed="true"
24.     width="50"
25.   />
26.   <el-table-column
27.     label="项目名称"
28.     prop="project_name"
29.     :show-overflow-tooltip="true"
30.     align="left"
31.     :fixed="true"
32.     width="400"
33.   >
34.     <template slot-scope="{ row }">
35.       <span>{{ row.project_name }}</span>
36.     </template>
37.   </el-table-column>
38.   <el-table-column
39.     label="项目进度及百分比"
40.     prop="progress_percentage"
41.     align="center"
42.     width="180"
43.     :show-overflow-tooltip="true"
44.   >
45.     <template slot-scope="{ row }">
46.       <el-select
47.         v-if="LockStatus == 0 && row.is_my_project == 1"
48.         v-model.lazy="row.progress_percentage"
49.         style="width: 175px"
50.       >
51.         <el-option label="招标阶段10%" value="招标阶段10%"></el-option>
52.         <el-option label="合同签订并开工50%" value="合同签订并开工50%"></el-option>
53.         <el-option label="转运维100%" value="转运维100%"></el-option>
54.       </el-select>
55.       <span v-else>{{ row.progress_percentage }}</span>
56.     </template>
57.   </el-table-column>
58.   <el-table-column
59.     label="合同签订金额"
60.     prop="contract_signing_amount"
61.     align="center"
62.     width="100"
63.     :show-overflow-tooltip="true"
64.   >
65.     <template slot-scope="{ row }">
66.       <textarea
67.         v-if="LockStatus == 0 && row.is_my_project == 1"
68.         v-model.lazy="row.contract_signing_amount"
69.         rows="1"
70.         cols="30"
71.         style="width: 98px;border: none;resize: none;margin-top: 7px;text-align: center;"
72.         class="pass_input"
73.       />
74.       <span v-else>{{ row.contract_signing_amount }}</span>
75.     </template>
76.   </el-table-column>
77.   <el-table-column
78.     label="备注"
79.     prop="info"
80.     align="center"
81.     width="100"
82.     :show-overflow-tooltip="true"
83.   >
84.     <template slot-scope="{ row }">
85.       <textarea
86.         v-if="LockStatus == 0 && row.is_my_project == 1"
87.         v-model.lazy="row.info"
88.         rows="1"
89.         style="width: 98px;border: none;resize: none;margin-top: 7px;text-align: center;"
90.         class="pass_input"
91.       />
92.       <span v-else>{{ row.info }}</span>
93.     </template>
94.   </el-table-column>
95.   <el-table-column
96.     fixed="right"
97.     :label="'操作'"
98.     align="center"
99.     width="100"
100.   >
101.     <template #default="{ row }">
102.       <div
103.         class="table-btn-box"
104.         v-if="LockStatus == 0 && row.is_my_project == 1"
105.       >
106.         <el-button type="primary" @click="submitRow(row)">提交</el-button>
107.       </div>
108.     </template>
109.   </el-table-column>
110.   <div
111.     v-if="tableData.length >= 50"
112.     slot="append"
113.     style="margin-top: 10px;margin-bottom: 10px;text-align: center;font-size: 15px;">
114.       {{ content }}
115.   </div>
116. </el-table>

复制代码

其他部分的代码

1. data() {
2.   return {
3.     listLoading: false, // Loading状态
4.     tableData: [], // 表格展示数据
5.     allData: [], // 接口返回的所有表格数据
6.     currentPage: 1, // 第几页
7.     pageSize: 50, // 每页展示多少条
8.     reload: 0,
9.   }
10. },
11. mounted() {
12.   // 表格添加滚动事件
13.   this.$refs.myTable.bodyWrapper.addEventListener('scroll', this.handleScroll)
14. },
15. beforeDestroy() {
16.   // 销毁滚动事件
17.   this.$refs.myTable.bodyWrapper.removeEventListener('scroll', this.handleScroll)
18. },
19. watch: {
20.   allData: {
21.     deep: true,
22.     immediate: true,
23.     handler(newValue) {
24.       const currentPage = this.currentPage || 1
25.       const total = currentPage * this.pageSize
26.       this.tableData = newValue.slice(0, total)
27.     }
28.   },
29.   // 强制刷新变量
30.   reload() {
31.     this.total = this.allData.length
32.     this.currentPage = 0
33.     this.$refs.myTable.bodyWrapper.scrollTop = 0
34.     this.fetchData()
35.     this.loop()
36.   }
37. },
38. methods: {
39.   // 滚动加载下一页，将下一页数据和之前数据进行累加
40.   handleScroll(event) {
41.     const { scrollTop, scrollHeight, clientHeight } = event.target
42.     if (Math.ceil(scrollTop) + clientHeight >= scrollHeight) {
43.       // 如果数据已全部加载，则跳出
44.       if (this.tableData.length == this.total) {
45.         return
46.       }
47.       this.fetchData()
48.     }
49.   },
50.   fetchData() {
51.     this.currentPage += 1
52.     const start = (this.currentPage - 1) * this.pageSize
53.     const end = start + this.pageSize
54.     const newData = this.allData.slice(start, end)
55.     this.tableData =
56.       this.currentPage == 1 ? newData : this.tableData.concat(newData)
57.   },
58.   // 如果滚动高度小于可视范围高度，则继续加载下一页，直至可视区域填充满
59.   loop() {
60.     this.$nextTick(() => {
61.       const { scrollHeight, clientHeight } = this.$refs.myTable.bodyWrapper
62.       if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
63.         if (this.tableData.length == this.total) {
64.           return         
65.         }
66.         this.fetchData()
67.         this.loop()
68.       }
69.     })
70.   },
71. },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4