问题描述
前端UI框架使用的是ElementUI,项目要求数据不分页一个表格至少要1000条数据，这时点击其他DOM操作，会出现卡顿的现象。如点击复选框。
官网的示例也搞了，超过200行后操作就会卡很久，比如复选框
基于elementUI的table，在不修改源码的情况下支持大数据了渲染的场景
思路：
减少对DOM节点的渲染，通过滚动函数节流实现滚动后事件来动态渲染数据
解决方案：
Vue自定义指令 （通过自定义指令隐藏数据）
ele-table
<template>
<div>
<el-table border :data="filteredData" style="width: 100%" height="300" :data-size="tableData.length" v-loadmore="handelLoadmore">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<div>
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<div>
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<div>
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<div>
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<div>
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</div>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<div>
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'test',
components: {},
data () {
return {
tableData: [],
currentStartIndex: 0,
currentEndIndex: 20
};
},
created () {
this.getTableData();
},
computed: {
filteredData () {
return this.tableData.filter((item, index) => {
if (index < this.currentStartIndex) {
return false;
} else if (index > this.currentEndIndex) {
return false;
} else {
return true;
}
});
}
},
methods: {
handelLoadmore (currentStartIndex, currentEndIndex) {
this.currentStartIndex = currentStartIndex;
this.currentEndIndex = currentEndIndex;
},
getTableData () {
let cont = 0;
let tableData = [];
while (cont < 30000) {
cont = cont + 1;
let object = {
date: cont,
name: '王小虎' + cont,
address: '上海市普陀区金沙江路 cont 弄'
}
tableData.push(object);
}
setTimeout(() => {
this.tableData = tableData;
}, 2000);
}
},
watch: {}
}
</script>
<style scoped>
.el-table__body-wrapper .el-table__row td {
display: none;
}
.el-table__body-wrapper .el-table__row {
height: 38px;
}
</style>指令代码：文章来源：https://www.toymoban.com/news/detail-508452.html
// 设置默认溢出显示数量
var spillDataNum = 20;
// 设置隐藏函数
var timeout = false;
let setRowDisableNone = function (topNum, showRowNum, binding) {
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
binding.value.call(null, topNum, topNum + showRowNum + spillDataNum);
});
};
export default {
name: 'loadmore',
componentUpdated: function (el, binding, vnode, oldVnode) {
setTimeout(() => {
const dataSize = vnode.data.attrs['data-size'];
const oldDataSize = oldVnode.data.attrs['data-size'];
if(dataSize === oldDataSize){
return;
}
const selectWrap = el.querySelector('.el-table__body-wrapper');
const selectTbody = selectWrap.querySelector('table tbody');
const selectRow = selectWrap.querySelector('table tr');
if (!selectRow) {
return;
}
const rowHeight = selectRow.clientHeight;
let showRowNum = Math.round(selectWrap.clientHeight / rowHeight);
const createElementTR = document.createElement('tr');
let createElementTRHeight = (dataSize - showRowNum - spillDataNum) * rowHeight;
createElementTR.setAttribute('style', `height: ${createElementTRHeight}px;`);
selectTbody.append(createElementTR);
// 监听滚动后事件
selectWrap.addEventListener('scroll', function () {
let topPx = this.scrollTop - spillDataNum * rowHeight;
let topNum = Math.round(topPx / rowHeight);
let minTopNum = dataSize - spillDataNum - showRowNum;
if (topNum > minTopNum) {
topNum = minTopNum;
}
if (topNum < 0) {
topNum = 0;
topPx = 0;
}
selectTbody.setAttribute('style', `transform: translateY(${topPx}px)`);
createElementTR.setAttribute('style', `height: ${createElementTRHeight-topPx > 0 ? createElementTRHeight-topPx : 0}px;`);
setRowDisableNone(topNum, showRowNum, binding);
})
});
}
};全局main.js引用文章来源地址https://www.toymoban.com/news/detail-508452.html
import loadmore from '@/js/loadmore'
Vue.directive(loadmore.name,loadmore.componentUpdated);到了这里，关于解决ElementUI列表大数据操作卡顿问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
