个人兴趣网站设计_武汉长江日报疫情_青岛网络优化代理_seo关键词的优化技巧

2024.12.25今天我学习了如何使用el-table-virtual-scroll虚拟表格组件，当我们的表格需要渲染1000条以上的数据时，普通的el-table已经没办法实现，因为当数据量大的情况下会直接出现卡死的情况，所以我找到了el-table-virtual-scroll这个组件，通过只渲染展示到的高度来防止卡顿。

一、安装el-table-virtual-scroll

npm i el-table-virtual-scroll -S

二、注册使用

// 虚拟表格
import VirtualScroll, {VirtualColumn} from "el-table-virtual-scroll";

components: {VirtualScroll,VirtualColumn
},

三、template页面

注意：key-prop必须要写

<virtual-scroll :data="detail_list" key-prop="id"  @change="(renderData) => virtual_list = renderData"><el-table :data="virtual_list"></el-table>
</virtual-scroll>

 

四、全部代码

<template><div><virtual-scroll :data="all_list" key-prop="id" @change="(renderData) => virtual_list = renderData"><el-table :data="virtual_list"></el-table></virtual-scroll></div>
</template><script>
// 虚拟表格
import VirtualScroll, {VirtualColumn} from "el-table-virtual-scroll";export default{data(){return{all_list:[],//存放所有数据virtual_list:[],//展示的数据}},components: {VirtualScroll,VirtualColumn,},created(){},methods:{}}
</script>