el-table selectable,el table
我们将经常使用桌子。如果数据量很大，我们可以直接分页。如果有多个表，如何优化？有兴趣的可以了解一下。
目录
前言解决思想具体实现需要满足的必要条件问题。
前言
我们将经常使用桌子。如果数据量很大，我们可以直接分页，但是不可避免的会出现一些情况，一个页面需要显示很多项，或者不需要分页。
这时候如果纯显示更好，如果在列表中加入editable，就会卡死。点击一个下拉框，要过很久才会弹出下拉框。这将极大地影响用户的使用。
解决思路
首先我考虑了页面是否会因为数据加载慢而卡死，所以我采用了滚动加载的方法。先拿到数据后，我先加载了100条数据。滚动的时候加载到页面中，这样批量加载会减少第一次数据太多的压力。起初，没有任何问题。当后面的数据越来越多的时候，点击表格中可编辑的下拉框，你会明显感觉到页面发生了变化。
后面的想法是，如果我只加载页面可见区域的数据，那么应该可以解决页面堵塞的问题。
具体实现
加载开始，获取10/20条数据(这个可以用每行的高度/页面上显示数据的高度来计算，或者一个固定值)。滚动时监控滚动条，根据滚动距离计算页面上显示的数据。
需要满足的必备条件
列表的总高度
数据总长度每行高度
如果只显示页面的高度，则不能滚动新数据。
每行的高度
如果是固定高度，可以写死值。
如果它是一个动态高度，可以通过下式计算
滚动的偏移量
当前滚动距离-(当前滚动距离%每行高度)
页面上显示的数据的开始索引和结束索引。
索引从0开始。
在滚动过程中，起始索引=Math.floor(当前滚动距离/每行高度)
代码步骤
div class=main-inner-content
El-table:data= visible data :style= { min-height :grading editor？list height“px”:“100%”}“id=“dataTable”
/el-table
/div
计算值：{
////列表的总高度
listHeight () {
//tableData是接口的总数据。
返回this . table data . length * this . itemsize；
},
////对应于偏移量的样式
getTransform () {
返回` translate3d(0，${this.startOffset}px，0)`；
},
//获取真实的显示列表数据
visibleData () {
let table body=document . query selector( # dataTable。El-table _ _ body-wrapper’)
if(表体){
table body . style . transform=this . get transform
}
返回this . tabledata . slice(this . start，Math.min(this.end，this . tabledata . length))；
}
},
data() {
返回{
表数据：[]，
//偏移量
起始偏移量：0，
//开始索引
开始：0，
//结束索引
end: null，
};
},
方法：{
handleScroll () {
//这是滚动框。如果滚动位置是table的话，在这里改一下就好了，还有一个分配偏移量的地方。
let scroll top=document . getelementbyid( main-inner-content )。scrollTop
////此时的起始索引
this . start=math . floor(scroll top/this . itemsize)；
if(this . start 0)this . start=0；
////此时的结束索引
this . end=this . start 10；
////此时的偏移量
this . start offset=scroll top-(scroll top % this . itemsize)；
this . start offset=this . start offset this . itemsize？this . start offset-this . itemsize:0；
}
},
已安装(){
window . addevent listener( scroll ，this.handleScroll，true)；
},
销毁(){
window . removeeventlistener( scroll ，this.handle scroll，true)//清除滚动条的滚动事件。
}
当页面滚动时，总是只加载十条数据。
页面显示由偏移量决定。
问题
我设置了整个el表的总高度，然后设置了下面列表项的框的偏移量。如果页面需要在不刷新的情况下检索数据(如分页)，则必须初始化数据，否则页面会直接显示之前的数据，否则页面会是空白的。
document . query selector( # main-inner-content )。scrollTop=0
this.start=0
this.startOffset=0
this . end=this . start 10；
let table body=document . query selector( # dataTable。El-table _ _ body-wrapper’)
table body . style . transform=this . get transform
为了方便计算和使用，页面每行的高度是固定的，不可省略。但是部署预发布环境后，我会发现code-WebKit-box-orientation:vertical没有显示。
解决方法：写inline style style=-WebKit-box-orientation:vertical 就这样。省略-文本{
自动换行：断字；
溢出：隐藏；
文本溢出：省略号；
显示：-WebKit-box；
-webkit-box-orient:垂直；
-WebKit-line-clamp:2；
}
涉及
https://juejin.cn/post/6844903982742110216#heading-4
https://codesandbox.io/s/virtuallist-1-forked-sd2xn?file=/src/components/virtual list . vue:1487-1652
关于使用虚拟列表优化el-table中的表的文章到此结束。有关优化el-table中的表格的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。