一、无缝滚动
data () {
return {
timer1: null,
notimer1: null,
}
},
created () {
setTimeout(() => {
this.animatesgjl()
}, 0)
},
methods: {
// 表格自动滚动
animatesgjl () {
// 拿到表格挂载后的真实DOM
const table = this.$refs.table
// 拿到表格中承载数据的div元素
const divData = table.bodyWrapper
const clientHeight = this.$refs.table.$el.clientHeight - 48//减去表头
// 是否超过可视区,超过自动滚动,否则停留3秒跳转
if (clientHeight < divData.scrollHeight) {
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
this.timer1 = setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 2
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (clientHeight + divData.scrollTop == divData.scrollHeight) {
clearInterval(this.timer1)
this.$nextTick(() => {
this.animatesgjl()
})
// 重置table距离顶部距离
divData.scrollTop = 0
}
}, 100)
} else {
this.notimer1 = setInterval(() => {
clearInterval(this.notimer1)
this.animatesgjl()
}, 3000)
}
},
}
二、懒加载
第一步:下载插件
npm i el-table-infinite-scroll@2 --save
npm i core-js --save
第二步:全局引入main.js
import elTableInfiniteScroll from "el-table-infinite-scroll";
Vue.use(elTableInfiniteScroll);
第三步:在表头添加 v-el-table-infinite-scroll="load"
v-el-table-infinite-scroll=“getCompanyList” : 设置加载的参数
:infinite-scroll-distance=“10” : 距离底部多少的时候在可以触发加载
:infinite-scroll-disabled=“isDisabled” : 控制禁用无限滚动的属性
<el-table
:data="Orderlist"
height="290"
:highlight-current-row="false"
ref="table"
v-el-table-infinite-scroll="loadscroll"
:infinite-scroll-distance="15"
:infinite-scroll-disabled="isDisabled"
>
data () {
return {
timer1: null,
notimer1: null,
queryParams: { pagesize: 10, page: 0 },
totalPage: 2,//总页码
isDisabled: false,// 是否禁用无限滚动
Orderlist:[]
}
},
methods: {
async loadscroll () {
if (this.isDisabled) return
if (this.queryParams.page >= this.totalPage) {
// 结束加载
this.isDisabled = true;
} else {
this.queryParams.page++
await GetJCZXData(this.queryParams).then((res) => {
this.totalPage= res.data.totalPage;
this.Orderlist = this.Orderlist.concat(res.data.Orderlist);
});
}
},
}