这里写目录标题

使用 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-griduse-virtual:data="weightData":highlight-current-row="true"max-height="200"size="mini"striperef="table"width="100%"row-height="20"><plx-table-columnalign="center"label="序号"width="80"prop="Seq"/><plx-table-columnalign="center"label="物料编码"width="200"prop="MaterialId.Number"/><plx-table-columnalign="center"label="应收数量"width="200"prop="MustQty"/><plx-table-columnalign="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; /*滚动条的背景颜色*/}}

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

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

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

umy-ui官方文档

vxe-table Vue2.6 官方文档