vue web滚动条分页
1.在你的帮助类里面新建一个slidePagination.js文件
2.将下面的代码复制进去
import Vue from 'vue'
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
})
Vue.directive('loadmore', {
bind (el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function () {
let sign = 100
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign) {
binding.value()
}
})
}
})
Vue.directive('dialogDragWidth', {
bind (el, binding, vnode, oldVnode) {
const dragDom = binding.value.$el.querySelector('.el-dialog');
el.onmousedown = (e) => {
const disX = e.clientX - el.offsetLeft;
document.onmousemove = function (e) {
e.preventDefault();
const l = e.clientX - disX;
dragDom.style.width = `${
l}px`;
}
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
})
Vue.directive('dialogDrag', {
bind (el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
dialogHeaderEl.style.cursor = 'move';
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dialogHeaderEl.onmousedown = (e) => {
let oevent = e || window.event;
const disX = oevent.clientX - dialogHeaderEl.offsetLeft;
const disY = oevent.clientY - dialogHeaderEl.offsetTop;
let styL = 0, styT = 0;
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
} else {
styL = sty.left != 'auto' ? (+sty.left.replace(/\px/g, '')) : (dialogHeaderEl.offsetLeft);
styT = sty.top != 'auto' ? (+sty.top.replace(/\px/g, '')) : (dialogHeaderEl.offsetTop);
}
document.onmousemove = function (e) {
let oevent = e || window.event;
const l = oevent.clientX - disX;
const t = oevent.clientY - disY;
dragDom.style.left = `${
l + styL}px`;
dragDom.style.top = `${
t + styT}px`;
}
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
})
3.将此文件在main.js中引用
import "./utils/slidePagination";
4.具体引用,页面
<template>
<el-table stripe
:data="prescriptionRecordsList"
v-loadmore="loadMore"
v-loading="loadingBox"
height="700px"
border>
.......
</el-table>
</template>
data () {
return {
modulePage: {
page: {
currentPage: 1,
pageSize: 50,
total: 0,
}
},
list: [],
loadingBox: false,
loadSign: false,
};
},
methods: {
init () {
let that = this;
this.modulePage.page.currentPage = 1;
this.prescriptionRecordsList =[];
this.post("请求地址", this.modulePage).then(res => {
if (res.data.errorCode != "00") {
this.$message.warning(res.data.errorMsg);
return;
}
this.prescriptionRecordsList = res.data.sprbody.list;
that.modulePage.page.total = res.data.sprbody.total;
that.loadSign = true;
})
},
loadMore () {
let that = this;
if (this.loadSign) {
if (this.modulePage.page.currentPage > this.modulePage.page.total / this.modulePage.page.pageSize) {
return;
}
this.loadSign = false;
this.loadingBox = true;
this.modulePage.page.currentPage++;
setTimeout(() => {
that.loadPageValue();
}, 500)
} else {
return;
}
},
loadPageValue () {
let that = this;
this.post("请求地址", this.modulePage).then(res => {
if (res.data.errorCode != "00") {
this.$message.warning(res.data.errorMsg);
return;
}
this.prescriptionRecordsList = this.prescriptionRecordsList.concat(res.data.sprbody);
that.modulePage.page.total = res.data.sprbody.total;
that.loadSign = true;
that.loadingBox = false;
})
}
},
created () {
this.init();
}