Element UI 的
el-
table 组件默认不支持
无限滚动，需要通过自定义 slot 和监听 scroll 事件来实现。
以下是一个简单的例子：
```html
<template>
<div class="
table-wrap" ref="
tableWrap" @scroll="handleScroll">
<
el-
table :data="
tableData" v-loading="loading" border>
<
el-
table-column prop="name" lab
el="Name"></
el-
table-column>
<
el-
table-column prop="age" lab
el="Age"></
el-
table-column>
<
el-
table-column prop="address" lab
el="Address"></
el-
table-column>
</
el-
table>
<div v-if="showLoading" class="loading">
<i class="
el-icon-loading"></i>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
loading: false,
showLoading: false,
page: 1,
pageSize: 10,
total: 0,
};
},
created() {
this.loadData();
},
methods: {
loadData() {
this.loading = true;
// 模拟异步加载数据
setTimeout(() => {
const data = [];
for (let i = 0; i < this.pageSize; i++) {
data.push({
name: `Name${this.total + i + 1}`,
age: Math.floor(Math.random() * 100) + 1,
address: `Address${this.total + i + 1}`,
});
}
this.
tableData = this.
tableData.concat(data);
this.total += data.length;
this.loading = false;
}, 1000);
},
handleScroll() {
const
tableWrap = this.$refs.
tableWrap;
const scrollTop =
tableWrap.scrollTop;
const scrollHeight =
tableWrap.scrollHeight;
const clientHeight =
tableWrap.clientHeight;
if (scrollTop + clientHeight >= scrollHeight && !this.loading) {
//
滚动到底部且未加载中，则加载下一页数据
this.showLoading = true;
this.page++;
this.loadData();
}
},
},
};
</script>
```
在模板中，我们需要将
el-
table 放在一个具有固定高度和
滚动条的容器内，用 ref 属性获取容器元素并监听 scroll 事件，当
滚动到底部时触发加载下一页数据的操作。
在 data 中定义了一些状态，包括
表格数据、加载状态、当前页数、每页数量和数据总数等。loadData 方法用于模拟异步加载数据，并将加载到的数据追加到
表格数据中。handleScroll 方法用于监听 scroll 事件，当
滚动到底部时触发加载下一页数据的操作。
在模板中，我们还需要添加一个 loading 组件，用于显示加载中状态。根据 showLoading 变量的值决定是否显示 loading 组件。
需要注意的是，
el-
table 组件的高度必须要设置，否则无法触发
滚动事件。可以通过在
el-
table 上添加 height 属性或者在外层容器上设置固定高度来实现。
7240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
