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

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

流畅渲染万级数据并不会影响到 element-ui el-table组件的原有功能，并且新增了一些功能，具体请看属性配置

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

author: pengLei （如有问题请加QQ：403802162）

way to install

npm i pl-table vuedraggable

用前须知

如果你使用 use-virtual（渲染大数据）请看下面，当然如果你不用use-virtual属性（可以跳过须知），因为它就不存在下面的情况啦

使用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 配置如下

第一步: npm install babel-plugin-transform-vue-jsx babel-plugin-syntax-jsx --save-dev

第二步: （前提是必须安装了 babel-loader）

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

第一步:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props --save-dev

第二步:

第三步:

实例文件（基础用法）

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

Component API

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

注意: 更多配置具体请看element官方文档的table属性/事件/方法，因为有些属性/事件/方法很少用，所以没加入到plTable（你可以自行在plTable里面添加表格属性/事件/方法（修改plTable源码），然后再引入plTable组件的地方传入/调用）

Table Attributes（表格属性）

属性	说明	类型	默认值
datas	表格数据	array	-
height-switch	是否需要去计算表格高度，为false就相当于自适应高度，为true相当于会去计算外层高度，超出高度表格出现滚动条 (注意为false时候，请不要设置useVirtual属性)	boolean	true
record-table-select	是否记录表格的选项id(必须保证行ID存在，且唯一) 默认为false （用于我表格每页选中项进行保存，切换分页，不会导致之前页勾选的选项消失）	boolean	false
drop-action	是否开启掉落元素（注：就是在表格列中多加一列，用来解决拖动表格引起的表格宽度变小问题，导致出现固定列，与表体分开。多加一列就是为了去自适应当表格拖动列宽小了，然后多加一列去填满剩余的宽度）	boolean	true
border	是否显示纵向边框	boolean	true
size	Table 的尺寸 / 可选值 medium / small / mini	String	-
show-summary	是否需要合计	boolean	false
show-header	是否显示表头	boolean	true
empty-text	空数据时显示的文本内容	String	暂无数据
default-expand-all	是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	Boolean	false
highlight-current-row	是否要高亮当前行	boolean	true
stripe	是否为斑马纹	boolean	false
tree-props	渲染嵌套数据的配置选项	Object	{ hasChildren: 'hasChildren', children: 'children' }
sum-text	合计行第一列的文本	String	"合计"2字
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。(注意 use-virtual开启时，无效),	String	-
header-drag-style	是否修改表格的头部拖动样式（为true的话，头部样式将变成用前须知那里面的图片效果）	Boolean	false
use-virtual	是否开启虚拟滚动 (解决大数据渲染卡顿问题)	Boolean	false
row-height	use-virtual未开启的情况可以不需要，行高(必须要设置正确的行高，否则会导致表格计算不正确) 最好与CSS设置的表格行高一致，	Number	60
height-change	是否开启表格高度随数据多少而变化，如数据少的时候，表格高度就变小那你就改成true；如你想要表格永远处于外层盒子多高，表格就多高那你就改成 false，	Boolean	true
excess-rows	可视区域上方和下方额外渲染的行数，行数越多表格接替渲染效果越好，但越耗性能	Number	3
paging-scroll	跳转分页是否需要把表体滚动条回到顶部及左侧	Boolean	true
span-method	合并行或列的计算方法 / 具体操作请看el-table用法 (注意，当开启useVirtual时或者数据每页条数超过50，无效，原因会渲染慢)	Function	—
tooltip-effect	tooltip effect 属性 / 可选值： dark/light	String	dark
tooltip-placement	Tooltip 的出现位置 (注意：此属性必须开useVirtual才生效，不开启useVirtual，就是默认为top,不可配置) / 可选值: 自己查看element的Tooltip组件的placement属性	String	top
total-option	需要合计的选项（需要开启showSummary：true）（注意：当写了自定义合计方法（summary-method），此属性不在生效）	totalOption格式如下 = [{ label: '金额', // 需要合计的表头名 unit: '元' // 合计出来的单位名 }]	[]
summary-method	自定义的合计计算方法，（注意：当写了自定义合计方法，total-option属性不在生效）	Function({ columns, data })	—
addfence	是否需要在表格尾部添加一行计算表格围栏。（比如你觉得合计一行不够，你还需要求平均值，或者其他）默认为帮你求平均值	如果你要自定义请看fenceMethod属性	Boolean
fence-method	自定义新添加计算围栏的计算方法（类似自定义合计算方法一样）	Function({ columns, data })	-

Table 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

Table Methods（表格的方法）

方法名	说明	参数
toggleAllSelection	用于多选表格，切换所有行的选中状态	-
clearSelection	用于表格多选，清空用户的选择	-
toggleRowSelection	用于表格多选，切换某一行的选中状态	rows 数据格式: [{ row: row 行, selected: true
setHeight	当窗口高度变化或者外层高度变化，就调用该方法（从而刷新表格高度）	-
toggleRowExpansion	用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）	row, expanded
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row

Table-column Attributes

有关于el-table-column配置具体请看element官方文档的table-column属性

属性	说明	类型	默认值
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip（文字提示框）	Boolean	false
resizable	对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）	boolean	true
align	对齐方式 / 可选值：left/center/right	String	left
header-align	表头对齐方式，若不设置该项，则使用表格的对齐方式 / 可选值： left/center/right	String	—

Pagination Attributes（分页属性）

有关于Pagination分页配置具体请看element官方文档的Pagination

属性	说明	类型	默认值
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

Pagination Events（分页的事件）

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

Field 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

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

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

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

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

更新日志

2.3.2

修改表格的bug

2.3.1

修改表格的bug2. 新增表格方法3. 优化表格事件4. 完善功能

2.3.0

修改表格的bug

2.2.9

修改表格的bug 2. 新增表格方法

2.2.8

增加了表格自适应高度，不给高度（具体请看表格 height-switch属性） 2. 修改表格的bug

2.2.7

添加自定义的合计计算方法 2. 修改ele表格的bug 3. 添加更多表格属性

shangbaocai / pl-table Goto Github PK

pl-table's Introduction