Vue2 el-table 数据量大的情况下使用虚拟滚动

最新推荐文章于 2025-03-12 18:58:50 发布

听摇滚的悟空

最新推荐文章于 2025-03-12 18:58:50 发布

阅读量3.9k

点赞数 7

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/njihkj/article/details/139676085

版权

el-table+el-pagination组件一起用时，从10条/页切换到100条/页会有几秒钟的loading卡顿，解决方法为使用虚拟滚动插件el-table-virtual-scroll

文档：https://gitcode.com/xiaocheng555/el-table-virtual-scroll

效果预览：el-table-virtual-scroll

注意事项：

VirtualScroll组件中必须设置key-prop，否则会出现错行
使用 <el-table-virtual-scroll> 做表格虚拟滚动，是不支持 ElementUI 表格的原有的索引、多选、扩展行等功能，需要使用 <virtual-column> 来兼容。<virtual-column> 组件内封装了 <el-table-column>，支持传入 <el-table-column> 组件的props属性。

1、安装el-table-virtual-scroll

npm install el-table-virtual-scroll

2、js

import VirtualScroll, { VirtualColumn } from 'el-table-virtual-scroll'

export default {
  components: {
    VirtualScroll: VirtualScroll,
    VirtualColumn: VirtualColumn
  },
  data () {
    virtualData: [], // 真正的全部的数据
    tableData: [], // 虚拟滚动组件中当前显示的数据
    tableSelRows: []
  },
  methods: {
    tableSelectionChange (val) {
      this.tableSelRows = val
    }
  }
}

3、template

<virtual-scroll
        :data="virtualData"
        :item-size="62"
        :key-prop="id"
        @change="(virtualList) => tableData = virtualList"
        @selection-change="tableSelectionChange"
        :virtualized="true"
      >
        <el-table
          highlight-row
          ref="tableData"
          border
          class="normalTableList"
          :data="tableData"
        >
          <virtual-column
            width="50"
            fixed
            type="selection"
          />
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
       </table>
 </virtual-scroll>