使用el-table渲染将近200列数据渲染慢的问题

最新推荐文章于 2024-05-09 15:05:15 发布

qq_43791427

最新推荐文章于 2024-05-09 15:05:15 发布

阅读量711

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43791427/article/details/130017443

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

##el-table渲染数据慢
使用el-table渲染将近200列数据用了将近30s的时候，这样肯定是不行的。
解决办法，找了一个表格组件 vxe-table，使用它的虚拟滚动
下面是表格代码，这里用vxe-grid标签

<vxe-grid
   border
   stripe
   resizable
   show-overflow="title"
   ref="xGrid"
   height="400px"
   :loading="loading"
   :column-config="{useKey: true}"
   @checkbox-change="onSelectionChange"
   @checkbox-all="onSelectAll">
 </vxe-grid>

渲染数据行列相关代码，前面添加复选框列和序号列
colData中存的是表头信息
rowData中存储表格数据

loadColumnAndData (colData, rowData) {
      this.loading = true
      Promise.all([
        this.mockColumns(colData),
        this.mockList(rowData)
      ]).then(rest => {
        const columns = rest[0]
        const data = rest[1]
        const startTime = Date.now()
        const xGrid = this.$refs.xGrid
        // console.log(columns)
        // 使用函数式加载，阻断 vue 对大数组的双向绑定
        if (xGrid) {
          Promise.all([
            xGrid.reloadColumn(columns),
            xGrid.reloadData(data)
          ]).then(() => {
            // VXETable.modal.message({ content: `渲染 xxx 列 xx 行，用时 ${Date.now() - startTime}毫秒`, status: 'info' })
            this.loading = false
          })
        }
      })
    },
    mockColumns (colData) {
      return new Promise(resolve => {
        const cols = []
        for (let index = 0; index < colData.length + 2; index++) {
          if (index === 0) {
            cols.push({
              type: 'checkbox',
              width: 50,
              fixed: 'left'
            })
          } else if (index === 1) {
            cols.push({
              title: '序号',
              type: 'seq',
              width: 60,
              fixed: 'left'
            })
          } else {
            cols.push({
              title: colData[index - 2].name,
              field: colData[index - 2].key,
              minWidth: 80,
              slots: {
                header: ({ column }, h) => {
                  let data = colData[index - 2]
                  return h('div', {
                    class: {
                      'header-column': true
                    }
                  }, [h('i', {
                    class: {
                      'el-icon-top': data.sort && data.sort === 'ASC',
                      'el-icon-bottom': data.sort && data.sort === 'DESC'
                    }
                  }), h(
                    'span', {}, data.name), h(
                    'img', {
                      attrs: {
                        src: setimg
                      },
                      style: {
                        'cursor': 'pointer'
                      },
                      on: {
                        click: () => {
                          this.handleToolbarClick(data)
                        }
                      }
                    })
                  ])
                }
              }
            })
          }
        }
        resolve(cols)
      })
    },
    mockList (rowData) {
      return new Promise(resolve => {
        resolve(rowData)
      })
    },