el-table实现滚动条分页懒加载1、滚动条懒加载实现分页数据获取
1、⾸先在⽂件夹directive下的directive.js⽂件夹中定义全局指令 如下：
'u strict';
//添加全局指令⽂件
import Vue from 'vue'
// 聚焦指令
// 注册⼀个全局⾃定义指令 `v-focus`
// v-focus
Vue.directive('focus',{
// 当被绑定的元素插⼊到 DOM 中时……
inrted:function(el){
/
/ 聚焦元素
el.focus();
}
})
滚动条滚动懒加载的具体实现步骤
空白简历表格免费
1、定义懒加载的全局指令
Vue.directive('loadmore',{//懒加载
个人租房合同模板
bind(el, binding){
const lectWrap = el.querySelector('.el-table__body-wrapper')
lectWrap.addEventListener('scroll',function(){
let sign =100
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if(scrollDistance <= sign){
binding.value()
}
})
}
})
// v-dialogDragWidth: 弹窗宽度拖⼤拖⼩
Vue.directive('dialogDragWidth',{
bind(el, binding, vnode, oldVnode){
const dragDom = binding.value.$el.querySelector('.el-dialog');
// ⿏标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offtLeft;
e.preventDefault();// 移动时禁⽤默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX;
dragDom.style.width = `${l}px`;
怎么替换文件}
}
}
}
})
//弹出框可拖拽
//弹出框可拖拽
//v-dialogDrag
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';
// 获取原有属性 ie dom元素.currentStyle ⽕狐⾕歌 ComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || ComputedStyle(dragDom, null);
合伙创业// ⿏标按下，计算当前元素距离可视区的距离
let oevent = e || window.event;
const disX = oevent.clientX - dialogHeaderEl.offtLeft;
const disY = oevent.clientY - dialogHeaderEl.offtTop;
// 获取到的值带px 正则匹配替换
let styL=0, styT=0;
/
/ 注意在ie中第⼀次获取到的值为组件⾃带50% 移动之后赋值为px
if(sty.left.includes('%')){
styL =+document.body.clientWidth *(+place(/\%/g,'')/100);
styT =+document.body.clientHeight *(+place(/\%/g,'')/100);
}el{
styL = sty.left!='auto'?(+place(/\px/g,'')):(dialogHeaderEl.offtLeft);
styT = p!='auto'?(+place(/\px/g,'')):(dialogHeaderEl.offtTop);
}
// 通过事件委托，计算移动的距离
let oevent = e || window.event;
const l = oevent.clientX - disX;
const t = oevent.clientY - disY;
// 移动当前元素
dragDom.style.left = `${l + styL}px`;
p = `${t + styT}px`;
// 将此时的位置传出去
// binding.value({x:e.pageX,y:e.pageY})
}
}
}
}
})
2、在el-table中使⽤指令定义⽅法、并且在data中定义所需变量
<el-table
:default-sort="{prop: 'date', order: 'descending'}"
size='small'
ref="multipleTable"
:data="tableData"
v-loadmore="loadMore"
v-loading="loadingBox"
tooltip-effect="dark"
:row-class-name="tableRowClassName"
height="90%"
@lection-change="handleSelectionChange">
3、根据所给的接⼝地址以及需要传进接⼝的参数进⾏第⼀页数据的获取showlist(){//管理列表查询
var th = this;
let jsonR ={
roleName: leName,//供应商⾓⾊
keyWord: this.keyWord,
page:0,
pageSize:20,
// orderBy: '',
// orderType: '',
bBuyer:'10'
}
if( JSON.Item('urInfo')).datas.data.platformType !='Z') jsonR.frspId = JSON.Item('urInfo')).datas.data.tspId ; this.$http({
method:'get',
data: jsonR,
url:'/api'+ this.$api.partner.addressList,
success:function(res){
th.tableData = res.datas.data;
th.loadSign = true;
th.loadingBox = fal;
}
})
},
4、调⽤loadMore懒加载分页数据的⽅法
loadMore(){
let that=this;
if(this.loadSign){
this.loadSign = fal
this.loadingBox=fal
this.page++
if(this.page > alPage){
return
}
tTimeout(()=>{
that.loadSign = true;
that.loadingBox=true;
百科书let jsonR ={
roleName: leName,//供应商⾓⾊
keyWord: that.keyWord,
page:this.page,
pageSize:20,
// orderBy: '',
// orderType: '',
bBuyer:'10'
}
if( JSON.Item('urInfo')).datas.data.platformType !='Z')
jsonR.frspId = JSON.Item('urInfo')).datas.data.tspId ;
this.$http({
method:'get',
人生规划书
data: jsonR,
url:'/api'+ this.$api.partner.urSearch,
success:function(res){
that.tableData = at(res.datas);
},
error:(res)=>{
console.log('error:',res);
}
考研辅导班收费
})
},500)
console.log('到底了', this.page)
}
},
梳理好⾃⼰的代码 就可以实现分页加载的功能了，如果后台没有返回总页数或者总条数的话，注意需要后台返回⼀下！！
毋意毋必毋固毋我
予⼈玫瑰，⼿留余⾹~
