如何渲染超大表格，例如一万行数据

最新推荐文章于 2025-06-06 00:03:08 发布

impossible1994727

最新推荐文章于 2025-06-06 00:03:08 发布

阅读量312

点赞数 1

文章标签：前端面试

本文链接：https://blog.youkuaiyun.com/impossible1994727/article/details/143925951

版权

用dom渲染？

放弃这个想法，页面会卡的要死

虚拟表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.content{
    width: 500px;
    height: 300px;
    border: 2px solid salmon;
    overflow: auto;
    position: relative;
}
.list{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0; 
}
.item{
    height: 44px;
    line-height: 44px;
    border: 1px solid aqua;
}
    </style>
</head>
<body>
    <div id="app">
        <div class="content"  ref="content" @scroll="handleScroll">
            <!-- 写这个div是为了模拟当前渲染的是1000条数据状态下的进度条长度 -->
            <div :style="{'height':total*lineHeight+'px'}"></div>
            
            <div class="list">
                <div class="item" v-for="(item,index) in vituralList" :key="index">{{item.name}}</div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            total:1000,//数组长度
            list:[],//真实数组
            vituralList:[],//循环展示的，虚拟数组
            lineHeight:44,//item 行高
            bufferSize:2,//额外渲染的item
        },
        mounted(){
            for(var i=0;i<this.total;i++){this.list.push({name:'name'+i})}
            this.updateList()
        },
        methods:{
            updateList(){
                const content=this.$refs.content;//获取父级dom
                const startIndex=Math.floor(content.scrollTop/this.lineHeight);
                const endIndex=startIndex+Math.ceil(content.clientHeight/this.lineHeight)+this.bufferSize;
                const list=this.$el.querySelector('.list');
                this.vituralList=this.list.slice(startIndex,endIndex)
                list.style.top =startIndex*this.lineHeight+'px';
            },
            handleScroll(){
                
                this.updateList();
            }
        }

    })
</script>
</html>