前端数据量大el-table太卡顿如何解决，嚼碎喂嘴里。

1、我们需要vxeTable npm install vxe-table 2、引用

import { App, createApp } from 'vue'
import VXETable from 'vxe-table' 
import 'vxe-table/lib/style.css'   
createApp(App).use(VXETable).mount('#app')

3、到页面使用

 <div :style="'width:100%;height:calc(100vh - 258px)'">
          <vxe-table
            border
            show-overflow
            height="98%"
            :row-config="{keyField: 'id',isHover: true}"
            :column-config="{resizable: true }"
            :checkbox-config="{reserve:true}"
            :loading="tableLoading"
            ref="tableRef"
            :data="tableData"
            align="center"
            @checkbox-change="checkboxFn"
            @checkbox-all="checkboxAll"
            :scroll-y="{enabled: true}"
          >
      
            <vxe-column field="aaa" title="商品代码"></vxe-column>
            <vxe-column field="bbb" title="商品名称"></vxe-column>
            <vxe-column field="ccc" title="产品SKU"></vxe-column>
            <vxe-column field="ddd" title="仓库SKU"></vxe-column>
            <vxe-column field="eee" title="属性1"></vxe-column>
            <vxe-column field="fff" title="属性2"></vxe-column>
            <vxe-column field="ggg" title="销售单价"></vxe-column>
            <vxe-column field="hhh" title="商品备注"></vxe-column>
            <vxe-column field="iii" title="简体SKU"></vxe-column>
            <vxe-column field="jjj" title="janCode"></vxe-column>
            <vxe-column field="kkk" title="数量"></vxe-column>
            <vxe-column title="操作">
              <template #default="{ row }">
                <el-button text @click="handleView(row)" type="primary" icon="View">{{ $t('详情') }}</el-button>
              </template>
            </vxe-column>
          </vxe-table>
        </div>

使用@checkbox-change和checkbox-all代替@selection-change="handleSelectionChange"

const tableRef=ref<VxeTableInstance<any>>()
const checkboxFn=()=>{
  const $table = tableRef.value
  if ($table) {
    let arr1=$table.getCheckboxRecords() || []
    let arr2=$table.getCheckboxReserveRecords() || []
    let resultArr=arr1.concat(arr2)
    console.log(resultArr)
  }
}
const checkboxAll=()=>{
  const $table = tableRef.value
  if ($table) {
    let arr1=$table.getCheckboxRecords() || []
    let arr2=$table.getCheckboxReserveRecords() || []
    let resultArr=arr1.concat(arr2)
    console.log(resultArr)
  }
}

如果要清除状态请使用下面的1和2替换3

1. tableRefs?.value.clearCheckboxRow()
2. tableRefs?.value.clearCheckboxReserve()
3. tableRef?.value.clearSelection()(原)

最后实现的效果就是下面这样的一点都不卡