<script>
var app = new Vue({
el: '#app',
data: function () {
return {
options: [],
item_cd: '',
sys_date: '',
computer_date: '',
clienHeight: '600',
loading: false,
itemKey: '0',
allData: [],
page: 1,
nums: 15,
total:0,
next: true,//是否可加载下一页
activeName: 'summary',
is_page:true
}
},
created() {
this.getSummaryData();
},
mounted() {
document.querySelector(".el-table__body-wrapper").addEventListener(
'scroll', (e) => {
this.getScroll(e)
},true)
},
methods: {
timestampToTime(today) {
var DD = String(today.getDate()).padStart(2, '0'); // 获取日
var MM = String(today.getMonth() + 1).padStart(2, '0'); //获取月份,1 月为 0
var yyyy = today.getFullYear(); // 获取年
var today = yyyy + '-' + MM + '-' + DD
return today;
},
getSummaryData() {
this.loading = true;
var json = {
sys_date: this.sys_date,
item_cd: this.item_cd,
computer_start_date: this.computer_date[0],
computer_end_date: this.computer_date[1],
page:this.page,
nums:this.nums
}
$.get("", json, (res) => {
res = JSON.parse(res)
if (res.code === 200) {
this.loading = false;
if (this.page==1&&this.is_page==false){
this.allData=[];
$('.el-table__body-wrapper').animate({scrollTop: 0}, 500);
}
this.allData =this.allData.concat(res.data.data);
this.total=res.data.total
this.options = res.data.item_data;
this.clienHeight = '80vh'
this.is_page=true;
this.next=true;
console.log(this.clienHeight)
}else {
that.loading=false;
that.$message({
message: res.data.message,
type: 'warning'
});
}
})
},
getScroll(event){
// let isLoading = true;//是否有数据可以加载
var that=this;
that.$nextTick(() => {
$(".el-table__body-wrapper").scroll(function(){
var divHeight = $(this).height();
var nScrollHeight = $(this)[0].scrollHeight;
var nScrollTop = $(this)[0].scrollTop;
if(nScrollTop + divHeight >= nScrollHeight&that.next) {
that.next=false;
that.loading=true;
that.page = that.page + 1;//每次分页+1
// alert(that.page)
if(that.page<=Math.ceil(that.total/that.nums)){
that.getSummaryData()
}else if (that.allData.length>=parseInt(that.total)){
// alert(that.page)
that.$message({
message: '到最后一条了哦~',
type: 'warning'
});
that.next = false;
that.loading = false;//无数据可以加载
}
}
});
})
},
onExport() {
var href = '';
var a = document.createElement('a'); // 创建下载链接
a.href = href;
a.target = '_blank'; // 新开页下载
document.body.appendChild(a); // 添加dom元素
a.click(); // 点击下载
document.body.removeChild(a); // 下载后移除元素
window.URL.revokeObjectURL(href); // 下载后释放blob对象
},
onImport() {
$("#upload").click()
},
// 表格转base64
getFile(file) {
var that = this;
let data = new FormData();
data.append('excel', file.target.files[0]);
$.ajax({
url: '',
type: 'POST',
data: data,
cache: false,
//不对FormData中的url进行编码,原样发送
processData: false,
//不修改contentType属性,使用默认
contentType: false,
success: function (res) {
res = JSON.parse(res)
if (res.code == '200') {
that.getSummaryData()
// this.getStaffList();
that.$message({
message: res.message,
type: 'success'
});
$("#upload").val("")
} else {
that.$message.error(res.message);
}
}
})
},
//设置表头的颜色
getRowClass({row, column, rowIndex, columnIndex}) {
return 'background:#558FC5 !important;'
},
//设置指定行、列、具体单元格颜色
cellStyle({row, column, rowIndex, columnIndex}) {
/* if (rowIndex % 2 == 0) {
return 'background:#EFF0F5 !important;'
} else {
return 'background:#F3F4F8 !important;'
}*/
},
},
})
</script>
el-table滚动条分页
于 2023-08-09 14:56:04 首次发布