el-table数据量太大会导致浏览器渲染时间太长,导致浏览器崩溃,采用懒加载方法,可以完美解决此类情况
<el-table v-loading="loading"
:data="tableList"
ref="containerTable"
border
stripe
v-loadmore='loadmore'
:height=scrollerHeight
:cell-style="columnbackgroundStyle"
:header-cell-style="{backgroundColor:'#E4E4E4',color:'#000000'}">
<el-table-column label="序号" align="center" prop="index" width="50" fixed/>
<el-table-column label="部门" align="left" prop="deptName" width="100" fixed />
<el-table-column label="仓库" align="left" prop="wareName" width="200" fixed />
<el-table-column label="物资编码" align="left" prop="matNo" fixed :show-overflow-tooltip="true" />
<el-table-column label="物资名称" align="left" prop="matName" width="250" fixed :show-overflow-tooltip="true" />
<el-table-column label="物资分类" align="left" prop="materialTypeName" fixed :show-overflow-tooltip="true" />
<el-table-column label="型号" align="left" prop="matModel" fixed :show-overflow-tooltip="true" />
<el-table-column label="备注" width="50" align="left" prop="remark" />
</el-table>
上面是表格代码
v-loadmore='loadmore' 懒加载方法
name: "Statistics",
directives: {
loadmore: {
bind (el, binding) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function () {
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
// 判断是否到底,scrollTop为已滚动到元素上边界的像素数,scrollHeight为元素完整的高度,clientHeight为内容的可见宽度
if (scrollDistance <= 10) {
binding.value()
}
})
}
}
},
data() {
return {
//懒加载下拉列表--start
resourceTotal:0,
resourceNum:1,
resourcePage:50,
//懒加载下拉列表--end
}
}
/** 查询字典类型列表 */
getList() {
this.loading = true;
this.queryParams.materialIds=null;
listInfo(this.queryParams).then(response => {
this.dataList = response.data;
this.loading = false;
//由于物资太多,默认展示前30条
this.tableList = response.data.slice(0,this.resourcePage);
this.resourceTotal = this.tableList.length;
this.resourceNum=1;
//跳到顶部操作
this.$refs.containerTable.bodyWrapper.scrollTop =0 //可根据页面高度设置
}
);
},
//懒加载下拉列表--start
loadmore () {
this.resourceNum++;
this.searchLoadResource();
},
searchLoadResource(){
let result = []
if(this.resourcePage*this.resourceNum < this.dataList.length){
result = this.dataList.slice(this.resourcePage*(this.resourceNum-1),this.resourcePage*this.resourceNum)
}else{
result = this.dataList.slice(this.resourcePage*(this.resourceNum-1),this.dataList.length)
}
this.resourceTotal = result.length;
if(this.tableList.length > 0){
var pushFlg = '';
// 这个循环是因为下拉框滚动条的时候,有时会揍两遍方法,导致数据重复添加
// 循环中的判断是为了不让数据重复添加
for(var i =0; i < result.length; i++){
if(this.tableList.findIndex(item => item.id === result[i].id) < 0){
pushFlg = 'push';
break;
}
}
if(pushFlg === 'push'){
this.tableList = this.tableList.concat(result);
}
}else{
this.tableList = result;
}
},
//懒加载下拉列表--end
至此完美解决
本文涉及到滚动条问题,需要重置滚动条高度的话,添加下面代码即可
//跳到顶部操作
this.$refs.containerTable.bodyWrapper.scrollTop =0 //可根据页面高度设置
附
table滚动区高度设置
computed: {
// 滚动区高度
scrollerHeight: function() {
return (window.innerHeight - 300) + 'px'; //自定义高度需求
}
},
解决横向混动条在固定列不可滚动问题,本人采用下面样式解决
<style>
.el-table__body-wrapper{
z-index: 2
}
.el-table__fixed {
height: auto !important;
bottom: 1px;
position: absolute;
top: 0;
left: 0;
}
</style>