element-ui中table大量数据渲染卡顿

最新推荐文章于 2025-10-23 16:53:52 发布

原创

最新推荐文章于 2025-10-23 16:53:52 发布 · 1.3w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element-ui #el-table

element-ui中的el-table在使用大量数据的时候卡顿、卡顿、卡顿（重要的事讲三遍），

特别是在table中还使用el-checkbox来进行全选的时候，

点击按钮直接卡顿3s界面才渲染，有没有很痛苦（反正我是很痛苦），

其实，可以使用pl-table来处理表格的（不是我写的）；

eg：就像这样

<pl-table
          row-key="id"
          :datas="dataList"
          border
          size="small"
          ref="myTable"
          @row-dblclick="handleDetail"
          @cell-click="cellClick"
          big-data-checkbox
          use-virtual
          :row-height="30"
          :excess-rows="10"
          :pagination-show="false"
        > 
          <pl-table-column align="center" width="50" fixed="left" prop="selection">
            <template slot="header" slot-scope="scope">
              <el-checkbox
                v-if="scope"
                @change="handleCheckAllChange"