element表格组件实现虚拟滚动，解决卡顿问题效果图:
1
2
vue代码
<template>
<el-table
:data="tableData"
ref="tableRef"
max-height="380"
border
stripe
class="myTable"
>
>
<el-table-column
prop="date"
label="必要元素："
min-width="150"
align="center"
fixed="left"
>
</el-table-column>
<el-table-column label="每⼀⾏⾼度必须相同">
<el-table-column
prop="name"
label="class不能为【myTable】"
min-width="180"
align="center"
>
</el-table-column>
<el-table-column label="ref不能为【tableRef】">
<el-table-column
prop="province"
label="省份"
min-width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="city"
label="市区"
min-width="150"
align="center"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
min-width="150"
align="center"
>
</el-table-column>
</el-table-column>
</el-table-column>
<el-table-column label="操作" fixed="right" min-width="160" align="center">      <template>
<el-button size="mini">编辑</el-button>
<el-button size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [],
saveDATA: [],
tableRef: null,
tableWarp: null,
fixLeft: null,
fixRight: null,
tableFixedLeft: null,
tableFixedRight: null,
scrollTop: 0,
num: 0,
start: 0,
end: 42, // 3倍的pageList
starts: 0, // 备份[保持与上⼀样]
ends: 42, // 备份[保持与上⼀样]
pageList: 14, // ⼀屏显⽰
itemHeight: 41, // 每⼀⾏⾼度
timeOut: 400 // 延迟
}
},
created() {
created() {
this.init()
},
mounted() {
this.$nextTick(() => {
this.tableRef = this.$refs.tableRef.bodyWrapper
this.tableFixedLeft = document.querySelector(
'.el-table .el-table__fixed .el-table__fixed-body-wrapper'
)
this.tableFixedRight = document.querySelector(
'.el-table .el-table__fixed-right .el-table__fixed-body-wrapper'
)
/**
* fixed-left | 主体 | fixed-right
*/
// 主体改造
let divWarpPar = ateElement('div')
divWarpPar.style.height = this.saveDATA.length * this.itemHeight + 'px'      let divWarpChild = ateElement('div')
divWarpChild.className = 'fix-warp'
divWarpChild.append(this.tableRef.children[0])
divWarpPar.append(divWarpChild)
this.tableRef.append(divWarpPar)
// left改造
let divLeftPar = ateElement('div')
divLeftPar.style.height = this.saveDATA.length * this.itemHeight + 'px'      let divLeftChild = ateElement('div')
divLeftChild.className = 'fix-left'
this.tableFixedLeft &&
element表格横向滚动条
divLeftChild.append(this.tableFixedLeft.children[0])
divLeftPar.append(divLeftChild)
this.tableFixedLeft && this.tableFixedLeft.append(divLeftPar)
// right改造
let divRightPar = ateElement('div')
divRightPar.style.height = this.saveDATA.length * this.itemHeight + 'px'      let divRightChild = ateElement('div')
divRightChild.className = 'fix-right'
this.tableFixedRight &&
divRightChild.append(this.tableFixedRight.children[0])
divRightPar.append(divRightChild)
this.tableFixedRight && this.tableFixedRight.append(divRightPar)
// 被设置的transform元素
this.tableWarp = document.querySelector(
'.el-table .el-table__body-wrapper .fix-warp'
)
this.fixLeft = document.querySelector(
'.el-table .el-table__fixed .el-table__fixed-body-wrapper .fix-left'
)
this.fixRight = document.querySelector(
'.el-table .el-table__fixed-right .el-table__fixed-body-wrapper .fix-right'      )
this.tableRef.addEventListener('scroll', Scroll)
})
},
methods: {
init() {
this.saveDATA = []
for (let i = 0; i < 10000; i++) {
this.saveDATA.push({
date: i,
name: '王⼩虎' + i,
address: '1518',
province: 'github:',
city: 'divcssjs',
zip: 'divcssjs' + i
})
}
this.tableData = this.saveDATA.slice(this.start, d)
},
onScroll() {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。