vue Vue VUE使用pl-table插件 解决 vue+elment el-table渲染万条以上的大数据，数据过多导致卡顿问题

使用 pl-table 插件

1、安装插件

插件地址： 地址

npm i pl-table

2、引入

/**
 * pl-table 插件
 */
import plTable from 'pl-table'
import 'pl-table/themes/index.css' // 引入样式（必须引入)，vuecli3.0不需要配置，cli2.0请查看webpack是否配置了url-loader对woff，ttf文件的引用,不配置会报错
import 'pl-table/themes/plTableStyle.css' // 默认表格样式很丑 引入这个样式就可以好看啦（如果你不喜欢这个样式，就不要引入，不引入就跟ele表格样式一样）

3、使用

pl-table 基于el-table，所以继承了el-table组件的所有方法
el-table 标签改为：plx-table-grid
el-table-column 改为： plx-table-column

简单示例

  <plx-table-grid
              use-virtual
              :data="weightData"
              :highlight-current-row="true"
              max-height="200"
              size="mini"
              stripe
              ref="table"
              width="100%"
              row-height="20"
            >
              <plx-table-column
                align="center"
                label="序号"
                width="80"
                prop="Seq"
              />

              <plx-table-column
                align="center"
                label="物料编码"
                width="200"
                prop="MaterialId.Number"
              />

              <plx-table-column
                align="center"
                label="应收数量"
                width="200"
                prop="MustQty"
              />

              <plx-table-column
                align="center"
                label="实收数量"
                width="200"
                prop="RealQty"
              />

              <plx-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >选择这个订单</el-button
                  >
                </template>
              </plx-table-column>
            </plx-table-grid>

自定义 plx-table 滚动条样式

/**
自定义plx-table表格滚动栏样式
*/
.plx-table {
  ::v-deep .plx-table-body-wrapper::-webkit-scrollbar {
    width: 10px; /*滚动条宽度*/
    height: 10px; /*滚动条高度*/
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::v-deep .plx-table--body-wrapper::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px #ccced2 inset; /*滚动条的背景区域的内阴影*/
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    background-color: #ccced2; /*滚动条的背景颜色*/
  }
  /*定义滑块 内阴影+圆角*/
  ::v-deep .plx-table--body-wrapper::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px #00a0e9 inset; /*滚动条的内阴影*/
    border-radius: 10px; /*滚动条的圆角*/
    background-color: #00a0e9; /*滚动条的背景颜色*/
  }
}

2022-09-21 不建议使用 pl-table

使用 有遇到bug，例如 出现多列,多行,固定列和正常列浮动很大，加上 作者已经没有维护这个插件了

建议使用 pl-table 的升级版 umy-ui ,替换很简单，或者使用 vxe-table

umy-ui官方文档

vxe-table Vue2.6 官方文档