本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
说我们IIS7站长博客，有一篇博文用了他们的图片。
要求我们给他们一张图片6000元。要不然法院告我们
为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！
另祝：版权碰瓷诈骗团伙，早日弃暗投明。
相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月
叹！百花齐放的时代,渐行渐远!
这里封装了一个全局属性
Vue.directive('tableScroll', {
bind(el, binding, vnode, oldVnode) {
let scrollTop = 0;
let dom = el.querySelector(".el-table__body-wrapper");
dom.addEventListener("scroll", (e) => {
let isBottom = dom.scrollHeight - dom.scrollTop === dom.clientHeight;
let isHorizontal = scrollTop == dom.scrollTop;
if (isBottom && !isHorizontal && dom.scrollTop != 0) {
if (binding.value) {
binding.value()
}
}
if (!isHorizontal) {
scrollTop = dom.scrollTop;
}
});
}
})
使用方法
<el-table
v-table-scroll="setTableData"
:data="tableData"
:height="tableHeight"
style="margin-top:10px"
v-loading="loading"
element-loading-text="加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
highlight-current-row
@current-change="handleCurrentChange"
ref="table"
></el-table>
使用示例使用v-table-scroll绑定你的数据加载方法
这里把方法放上,算是一个示例吧
setTableData(clear) {
if (clear == true) {
this.tableData = [];
this.currentRow = null;
this.pageIndex = 1;
this.hasMore = true;
}
if (!clear && !this.hasMore) {
this.$message.warning("没有下一页了... (～￣▽￣)～");
return;
}
this.loading = true;
this.$post("abc/abc", {
dateTime: this.date,
pageSize: this.pageSize,
pageIndex: this.pageIndex,
staCondition: this.serch,
})
.then((r) => {
if (r && r.data) {
//tableData为绑定的数据
let res = r.data.DATA || [];
this.tableData.push.apply(this.tableData, r.data.DATA);
if (this.tableData.length < r.data.COUNT) {
this.pageIndex++;
this.hasMore = true;
} else {
this.hasMore = false;
}
if (clear && this.tableData.length > 0) {
this.$refs.table.setCurrentRow(this.tableData[0]);
}
}
})
.finally(() => {
this.loading = false;
});
}
setTableData方法
