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

用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;//获取父级domconst 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>