plx table grid APi

plx-table-grid Attributes（表格属性）

plx-table-grid和pl-table部分属性/事件不一样，请根据这个文档来写plx吧

属性	说明	类型	默认值
data	表格数据(注意：大数据不建议使用双向绑定的 data 属性（vue 监听会大数据会短暂的卡顿），建议使用 reloadData 函数,请看表格方法)	array	-
height	表格高度（不给高度，或者高度为0，那么就是自适应； 如果你数据多而且高度为0或者为空，那么就会卡死	String, Number	-
max-height	Table 的最大高度。合法的值为数字 （不给height或者不给maxHeight，虚拟滚动直接会关闭）。	string/number	—
border	是否显示纵向边框	boolean	true
size	Table 的尺寸 / 可选值 medium / small / mini	String	-
show-header	是否显示表头	boolean	true
highlight-current-row	是否要高亮当前行	boolean	true
stripe	是否为斑马纹	boolean	false
span-method	合并行或列的计算方法	Function	—
show-summary	是否需要合计	boolean	false
summary-method	自定义的合计计算方法，看实例请看下面的最底部	Function({ columns, data })	—
default-sort	默认的排序列的 field和顺序。它的field属性指定默认的排序的列，order指定默认排序的顺序	Object	order: asc升序,desc降序
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className	Function({row, rowIndex})/String	-
row-style	行的 style 的回调方法	Function({row, rowIndex})/Object	-
cell-class-name	行单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className	Function({row, column, rowIndex, columnIndex})/String	-
cell-style	行单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	-
header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className	Function({row, rowIndex})/String	-
header-row-style	表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。	Function({row, rowIndex})/Object	—
header-cell-class-name	表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String	—
header-cell-style	表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。	Function({row, column, rowIndex, columnIndex})/Object	—
empty-text	空数据时显示的文本内容,也可以通过 slot="empty" 设置	String	暂无数据
show-overflow	设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）,建议不要关闭	Boolean	true
show-header-overflow	设置表头所有内容过长时显示为省略号,建议不要关闭	Boolean	true

plx-table-grid Events（表格的事件）

事件名	说明	参数
@select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
@select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
@selection-change	当选择项发生变化时会触发该事件	selection
@load-complete	当表格加载完成的事件回调 (当高度变化，数据变化，都会重新去计算表格，重新绘画表格，所以需要有些情况，想知道表格加载情况)	plTable实例对象
@row-dblclick	当某一行被双击时会触发该事件	row, column, event
@cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, event
@cell-mouse-leave	当单元格 hover 退出时会触发该事件	row, column, cell, event
@cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
@cell-dblclick	当某个单元格被双击击时会触发该事件	row, column, cell, event
@header-click	当某一列的表头被点击时会触发该事件	column, event
@header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	column, event
@current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow
@row-click	当某一行被点击时会触发该事件	row, column, event
@header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	{$rowIndex, column, columnIndex, $columnIndex, fixed, isHidden}
@table-body-scroll	当表体滚动时触发，无论横向还是竖向	{scrollTop,scrollLeft}, event
@sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
@filter-change	当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。	filters

plx-table-grid Methods（表格的方法）

方法名	说明	参数
toggleAllSelection	用于多选表格，切换所有行的选中状态	-
clearSelection	用于表格多选，清空用户的选择	-
toggleRowSelection	用于表格多选，切换某一行的选中状态	rows 数据格式: [{ row: row 行, selected: true 或者 false 如果使用了第二个参数(可以不使用)，则是设置这一行选中与否（selected 为 true 则选中）}]
toggleRowExpansion	用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）	row, expanded
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row
pagingScrollTopLeft	让表格滚动条回到顶部和左侧	参数top,left，距离顶部或左侧距离 默认为0
doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法	--
clearSort	用于清空排序条件，数据会恢复成未排序的状态	--
clearFilter	不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件	columnKey
sort	手动对 Table 进行排序。参数field属性指定排序列，order指定排序顺序。	field: string, order?: 'desc' ; 'asc'
reloadData	绑定表格数据方法	data表格数据 实例： this.$refs.plTable.reloadData(我就是表格数据啦)

plx-table-column Attributes

属性	说明	类型	默认值
filters	数据过滤的选项，数组格式，数组中的元素需要有 label 和 value 属性。	Array[{ label, value }]	—
filter-method	只对 filters 有效，自定义筛选方法 Function({value, row, column})	Function	-
show-overflow	设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）,建议不要关闭	Boolean	true
show-header-overflow	设置表头所有内容过长时显示为省略号,建议不要关闭	Boolean	true
resizable	对应列是否可以通过拖动改变宽度（需要在 pl-table 上设置 border 属性为真）	boolean	true
align	对齐方式 / 可选值：left/center/right	String	left
header-align	表头对齐方式，若不设置该项，则使用表格的对齐方式 / 可选值： left/center/right	String	—
fixed	将列固定在左侧或者右侧, 注意：与pl-table-column不同在于，不能直接写个fixed，而是写fixed = "left; right"	String	left"固定左侧", right"定右侧"

plx-table-column Slots 插槽

属性	说明	类型	默认值
header	自定义表头内容的模板	-	{column,columnIndex,$columnIndex,$rowIndex}, h

实例

<plx-table-column>
  <template v-slot:header>
     <span style="color: red;">这样玩也行</span>
  </template>
 <template v-slot:header="{ column }">
    <span style="color: red">这样玩也行</span>
 </template>
</plx-table-column>

Table分页属性（是ele的分页组件，用法请看实例文件）

属性	说明	类型	默认值
pagination-show	是否显示分页组件	boolean	false
total	总条目数	number	-
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	5
page-size	每页显示条目个数	Number	10
current-page	当前页数	Number	1
page-sizes 每页显示个数选择器的选项设置	number[]	[10, 20, 30, 50]
layout	组件布局，子组件名用逗号分隔	String	total, sizes, prev, pager, next, jumper

Table分页事件

事件名	说明	参数
@handlePageSize	分页变化，条数变化	{ size: 条数 page: 页 }

强调一点 以下这个操作显示字段不是表格列，不属于表格，它是一个侧滑弹框, 详细图片展示如下：

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

属性	说明	类型	默认值
dialog-data	选择显示字段数组 格式如下 [{ name: '我的', // 字段名 state: true, // 选择状态 disabled: true // 是否禁用 }]	Array	[]
show-amend	是否显示修改字段名按钮	Boolean	false
field-title	弹框的标题	String	选择显示字段
amend-btn-icon	修改字段名按钮的图标字体 (必须是iconfont字体)	String	'el-icon-edit'
field-sort	显示字段是否排序	Boolean	true

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

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

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

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

合计方法实例

  // plx的合计
   summaryMethod ({ columns, data }) {
          const means = []
          columns.forEach((column, columnIndex) => {
                if (columnIndex === 0) {
                    means.push('合计')
                } else {
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        means[columnIndex] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        means[columnIndex] += ' 元';
                    } else {
                        means[columnIndex] = '';
                    }
                }
            })
          // 返回一个二维数组的表尾合计
          return [means]
      },