concisevr/pl-table

A table based on element

pl-table 当前版本: "version": "2.2.0"

一个表格插件（完美解决万级数据渲染卡顿问题）

流畅渲染万级数据并不会影响到el-table的原有功能

element版本兼容：目前测试能兼容的element-ui的版本为 2.3.9 - 2.11.1(不代表高版本就不能使用)

author: pengLei

way to install

npm i pl-table vuedraggable

用前须知 (如果你使用 use-virtual（渲染大数据） 请看如下图)

引入方式 如下

  // main.js
  // 注：需要在Vue.use(ElementUi) 之前引入 （因为基于ele，所以需要安装element）
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import plTable from 'pl-table'
  Vue.use(ElementUI);
  Vue.use(plTable);

  new Vue({
    el: '#app',
    render: h => h(App)
  });

报错(使用注意点)

原因：内置组件采用JSX写法

    error  in ./node_modules/pl-table/package/src/virtual-table-header-render.js
    Module parse failed: Unexpected token (64:8)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    |   if (isGroup) this.$parent.isGroup = true;
    |   return (
    >         <table
    |     class="el-table__header"
    |       cellspacing="0"

解决上诉问题

如果你使用的是vue-cli 2.x 配置如下 第一步:

第二步:

如果你使用的是vue-cli 3.x 配置如下 第一步:

第二步:

实例文件（基础用法）

https://github.com/livelyPeng/pl-table/blob/master/Example/index.vue

Component API

https://github.com/penglei1996/pl-table/wiki/Component-API

Attributes（表格属性）

属性	说明	类型	默认值
datas	表格数据	array	-
record-table-select	是否记录表格的选项id(必须保证行ID存在，且唯一) 默认为false （用于我表格每页选中项进行保存，切换分页，不会导致之前页勾选的选项消失）	boolean	false
drop-action	是否开启掉落元素 （注：就是在表格列中多加一项，用来解决拖动表格引起的表格宽度变小问题，多加一列，页面是看不见的。）	boolean	true
border	是否显示纵向边框	boolean	true
show-summary	是否需要合计	boolean	false
highlight-current-row	是否要高亮当前行	boolean	true
stripe	是否为斑马纹	boolean	false
sum-text	合计行第一列的文本	String	"合计"2字
row-key	支持树类型的数据	String	-
header-drag-style	是否修改表格的头部拖动样式	Boolean	false
use-virtual	是否开启虚拟滚动 (解决大数据渲染卡顿问题)	Boolean	false
row-height	行高(必须要设置正确的行高，否则会导致表格计算不正确) 最后与CSS设置的表格行高一致，	Number	60
height-change	是否开启表格高度随数据多少而变化，如数据少的时候，想把分页放在底部（永远处于底部）	Boolean	true
excess-rows	可视区域上方和下方额外渲染的行数，行数越多表格接替渲染效果越好，但越耗性能	Number	3
paging-scroll	跳转分页是否需要把表体滚动条回到顶部及左侧	Boolean	true
total-option	需要合计的选项（需要开启showSummary：true）	totalOption格式如下 = [{ label: '金额', // 需要合计的表头名 unit: '元' // 合计出来的单位名 }]	[]

Methods（表格的方法, 可以在组件上绑定ref 然后使用 this.$refs.plTable.方法名（））

方法名	说明	参数
toggleAllSelection	用于多选表格，切换所有行的选中状态	-
clearSelection	用于表格多选，清空用户的选择	-
toggleRowSelection	用于表格多选，切换某一行的选中状态	rows rows数据格式: [{ row: ror(需要显示的行row), selected: true 设置这一行选中与否（selected 为 true 则选中 }]
setHeight	当窗口高度变化或者外层高度变化，就调用该方法（从而刷新表格高度）	-

Events（表格的事件）

事件名	说明	参数
@table-select-change	整个表格Checkbox选中的row的id数组, 必须保证row（表格的行数据）存在id且唯一，没有ID可以自己造 注意 : 1. 当@handle-selection-change或者@select或者@select-all事件触发，就会触发这个事件 （可以用来回显表格勾选状态） 2. 参数为 tableSelectData， cancelSelectData 3. 第一个参数是当前表格（含分页）选中项id数组, 第二个参数是当前表格（含分页）取消项id数组 4. 该事件触发方式 需要设置表格属性 record-table-select：true// 具体看表格属性	tableSelectData， cancelSelectData
@select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
@select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
@load-complete	当表格加载完成的事件回调 (当高度变化，数据变化，都会重新去计算表格，重新绘画表格，所以需要有些情况，想知道表格加载情况)	plTable实例对象
@row-dblclick	当某一行被双击时会触发该事件	row, column, event
@expand-change	当用户对某一行展开或者关闭的时候会触发该事件	row, expandedRows
@row-click	当某一行被点击时会触发该事件	row, column, event
@handle-selection-change	当选择项发生变化时会触发该事件	selection
@header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event

Attributes（分页属性）

属性	说明	类型	默认值
paginationShow	是否需要分页器	Boolean	true
pagerCount	页码按钮的数量，当总页数超过该值时会折叠	Number	5
page-sizes	每页显示个数选择器的选项设置	[number， number，number]	[10, 20, 30, 50]
ptTotal	数据总条数	Number	0
pageSize	每页条数	Number	1
currentPage	当前页	Number	1
paginationLayout	组件布局，子组件名用逗号分隔	String	total, sizes, prev, pager, next, jumper

Events（分页的事件）

事件名	说明	参数
@handlePageSize	获取当前分页的数据	page,size

Attributes（操作（显示字段）属性）

属性	说明	类型	默认值
dialogData	选择显示字段数组 格式如下 [{ name: '我的', // 字段名 state: true, // 选择状态 disabled: true // 是否禁用 }]	Array	[]
showAmend	是否显示修改字段名按钮	Boolean	false
fieldTitle	弹框的标题	String	选择显示字段
amendBtnIcon	修改字段名按钮的图标字体 (必须是iconfont字体)	String	'el-icon-edit'
field-sort	显示字段是否排序（使用排序前 先安装vuedraggable， npm i vuedraggable）	Boolean	true

Events（操作（显示字段）的事件）

事件名	说明	参数
@amend-field	修改单个字段按钮点击事件	row, index
@show-field	获取当前的需要显示的字段	当前的字段数组

Methods（操作（显示字段）的方法）

方法名	说明	参数
plDialogOpens	打开弹窗	-