pl table api
注意: pl-table当前对应的element-ui的文档是 2.13.0， 更多配置具体请看element官方文档的table属性/事件/方法，因为有些属性/事件/方法很少用，所以没加入到plTable, 新加功能凡是有看不懂的，请加群吧
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 表格数据(注意：大数据不建议使用双向绑定的 data 属性（vue 监听会大数据会短暂的卡顿），建议使用 reloadData 函数,请看表格方法) | array (如果表格数据row中存在disabled这个属性为true,那么当前行会被加上蒙层，不可点击。相当于屏蔽) | - |
| height | 表格高度（不给高度，或者高度为0，那么就是自适应；不给height或者不给maxheight，虚拟滚动直接会关闭）。 如果你数据多而且高度为0或者为空，那么就会卡死，不支持百分比 | String, Number | - |
| max-height | Table 的最大高度。合法的值为数字 （不给height或者不给maxHeight，虚拟滚动直接会关闭）。不支持百分比 | string/number | — |
| record-table-select | 是否记录表格的选项id(必须保证行ID存在，且唯一) 默认为false （用于我表格每页选中项进行保存，切换分页，不会导致之前页勾选的选项消失）注意：只有每页不超过1000条数据，才有效。 | boolean | false |
| border | 是否显示纵向边框 | boolean | true |
| size | Table 的尺寸 / 可选值 medium / small / mini | String | - |
| show-summary | 是否需要合计 | boolean | false |
| show-header | 是否显示表头 | boolean | true |
| current-row-key | 当前行的 key，只写属性 | String,Number | -- |
| default-expand-all | 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 | Boolean | false |
| expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 | Array | — |
| highlight-current-row | 是否要高亮当前行 | boolean | true |
| inverse-current-row | 是否需要反选高亮当前行（当点击行默认为选中，必须点击其他行才能取消选中，这是ele的原则。那么是否需要点击行选中，再次点击当前选中行就取消呢，请设置这个属性吧） | boolean | false |
| stripe | 是否为斑马纹 | boolean | false |
| fit | 列的宽度是否自撑开 | boolean | true |
| tree-props | 渲染嵌套数据的配置选项, 开启row-key后可以配置（基本的树表格配置，如同element的树表格） | Object | { hasChildren: 'hasChildren', children: 'children' } |
| tree-config | pl-table大数据树形表格配置项，必去开启row-key 且 开启use-virtual 才有效的配置 | Object | 请看tree-config的配置参数描述 |
| select-on-indeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 | Boolean | true |
| sum-text | 合计行第一列的文本 | String | "合计"2字 |
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用树形数据时（你不是树形数据表格 请不要给此属性），该属性是必填的。(注意 开启row-key 代表你当前使用的是普通的树表格跟element树表格一样。 但是同时开启use-virtual时，就是大数据树表格，具体请看实例), | String | - |
| header-drag-style | 是否修改表格的头部拖动样式 | Boolean | false |
| use-virtual | 是否开启虚拟滚动 (解决大数据渲染卡顿问题)， 不开启row-key代表是个大数据表格，开启row-key代表是个大数据树型表格 | Boolean | false |
| row-height | use-virtual未开启的情况可以不需要，行高(必须要设置行高，如css给td给了80高度，那么你就给row-height给80，不要乱给高度，以td tr高度为准，否则会导致表格计算不正确) | Number | 60 |
| excess-rows | 可视区域上方和下方额外渲染的行数，行数越多表格接替渲染效果越好，但越耗性能 | Number | 3 |
| span-method | 合并行或列的计算方法 | 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 | 自定义的合计计算方法，pl-table合计特色(跟ele合计有区别，怎么用？请看当前页面底部实例)（注意：当写了自定义合计方法，total-option属性不在生效） | Function({ columns, data }) | — |
| big-data-checkbox | 大量数据时候（至少数据量大于3000条每页），表格存在selection选择列表时，是否开启解决全选卡顿（缓慢）问题 | Boolean | false |
| 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 | — |
| thtd-beyond-hiding | 开启头部th, 表体td超出隐藏 注意: 此属性必须是在use-virtual开启情况下才有效, 如果关闭了，请把pl-table-column的showOverflowTooltip属性改为true，不然表格一定会出现错乱，相当于你可以让头部超出不隐藏。但是你不能让表体行超出不隐藏 | Boolean | true |
| default-sort | 默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 | Object | order: ascending, descending 如果只指定了prop, 没有指定order, 则默认顺序是ascending |
| empty-text | 空数据时显示的文本内容,也可以通过 slot="empty" 设置 | String | 暂无数据 |
| fixed-columns-roll | 表格有固定列,同时表格有合计,同时表格有横向滚动条，会导致固定列部分的横向滚动条不可拖动，是否需要解决此问题 | Boolean | false |
| selectTrClass | 如果当前行被选中了 列type存在类型为selection，就给当前行给个类样式, 示例: 比如你给这个属性给个selectTr（样式名）字符串，然后你就可以在你项目的CSS文件里面这样写 .selectTr td { background: #ccc !important;color: red !important;} | String | — |
| data-changes-scroll-top | 数据变化滚动条是否滚动到顶部 | Boolean | true |
- tree-config属性描述 格式：{ children: 'children', .... } 属性名 | 描述 | 类型 | 默认值
- children | 树子节点的属性 | String | children
- indent | 树节点的缩进 | Number | 20
- iconOpen | 自定义展开后显示的图标,暂无(没时间做) | String | -
- iconClose | 自定义收起后显示的图标，暂无(没时间做 | String | -
- expandAll | 默认展开所有子孙树节点（只会在初始化时被触发一次） Boolean | false
- trigger | 触发方式 default（点击按钮触发）, cell（点击单元格触发）, row（点击行触发）| String | default
- expandRowKeys | 默认展开指定树节点（只会在初始化时被触发一次，需要有 row-key属性值的字段）| Array<Row.row-key> | -
| 事件名 | 说明 | 参数 |
|---|---|---|
| @table-select-change | 整个表格Checkbox选中的row的id数组, 必须保证row（表格的行数据）存在id且唯一，没有ID可以自己造 （不懂问作者） 注意 : 1. 当@select或者@select-all事件触发，就会触发这个事件 （可以用来回显表格勾选状态） 2. 参数为 tableSelectData 当前表格（含分页）选中项id数组 4. 该事件触发方式 需要设置表格属性 record-table-select：true// 具体看表格属性 | tableSelectData |
| @select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection |
| @select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row |
| @selection-change | 当选择项发生变化时会触发该事件 | selection |
| @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 |
| @row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, column, event |
| @header-click | 当某一列的表头被点击时会触发该事件 | column, event |
| @header-contextmenu | 当某一列的表头被鼠标右键点击时触发该事件 | column, event |
| @current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
| @expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows |
| @row-click | 当某一行被点击时会触发该事件 | row, column, event |
| @header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
| @table-body-scroll | 当表体滚动时触发，无论横向还是竖向 | {scrollTop， scrollLeft, table}, event |
| @sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
| @filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
| 方法名 | 说明 | 参数 |
|---|---|---|
| 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 进行排序。参数prop属性指定排序列，order指定排序顺序。 | prop: string, order: string |
| reloadData | 绑定表格数据方法 | data表格数据 实例： this.$refs.plTable.reloadData(我就是表格数据啦) |
| scrollBottom | 表格滚动到底部 | - |
| isTreeExpandByRow(row) | 用于pl-table大数据树（2.7.5版本新增），判断行是否为树形节点展开状态 返回 Boolean | Row |
| setAllTreeExpansion | 用于pl-table大数据树（2.7.5版本新增），设置所有树节点的展开与否 | - |
| clearTreeExpand | 用于pl-table大数据树（2.7.5版本新增），手动清空树形节点的展开状态，数据会恢复成未展开的状态 | - |
| getTreeExpandRecords | 用于pl-table大数据树（2.7.5版本新增）, 获取已展开的节点（注意，即使父节点被收起，只要该节点还处于展开状态都能获取到） | - Array |
| setTreeExpansion(rows, checked) | 用于pl-table大数据树（2.7.5版本新增），设置展开树形节点，二个参数设置这一行展开与否 | row: Row, checked: boolean |
| toggleTreeExpansion(row) | 用于pl-table大数据树（2.7.5版本新增），切换展开树形节点的状态 | row: Row |
有关于pl-table-column更多配置具体请看element官方文档的table-column属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| border-line | 是否显示头部列的右边框线(前提是开启了header-drag-style属性) | boolean | true |
| tree-node | 只对use-virtual 和row-key配置时有效，指定为树节点（大数据树的关键点之一） | Boolean | false |
| 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-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 |
| 事件名 | 说明 | 参数 |
|---|---|---|
| @handlePageSize | 分页变化，条数变化 | { size: 条数 page: 页 } |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 |
| 事件名 | 说明 | 参数 |
|---|---|---|
| @amend-field | 修改单个字段按钮点击事件 | row, index |
| @show-field | 确认按钮点击事件,获取当前的需要显示的字段 | 当前的字段数组 |
| @reset | 重置按钮点击事件 | 当前的字段数组 |
| 方法名 | 说明 | 参数 |
|---|---|---|
| plDialogOpens | 打开弹窗 | - |
// 你加了分页 我里面会延迟去设置高度，因为我要计算分页的高度，此时分页还没出来 我得mounted后去计算，所以你在mounted去计算高度 是有问题的 你可以不是呀分页组件就没问题了
// ，使用分页组件 请 settimeout下再去设置高度
mounted () {
// 不使用分页
this.height = window.innerHeight - 50
// 使用分页你得这样去计算高度
setTimeout(() => {
this.height = window.innerHeight - 50
})
}, summaryMethod ({ columns, data }) {
function cacl(arr, callback) {
let ret;
for (let i=0; i<arr.length;i++) {
ret = callback(arr[i], ret);
}
return ret;
}
Array.prototype.sum = function () {
return cacl(this, function (item, sum) {
if (typeof (sum) == 'undefined') {
return item;
}
else {
return sum += item;
}
});
};
Array.prototype.avg = function () {
if (this.length == 0) {
return 0;
}
return this.sum(this) / this.length;
};
const means = [] // 合计
const fenceSums = [] // 平均值
columns.forEach((column, columnIndex) => {
if (columnIndex === 0) {
means.push('合计')
fenceSums.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] += ' 元'
// 改变了ele的合计方式，扩展了合计场景
// 你以为就只有上面这样玩吗？错啦，你还可以自定义样式哦
// means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span>'
means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span><br/><span>123</span>'
} else {
means[columnIndex] = '';
}
// 平均值
const precisions = [];
let notNumber = true;
values.forEach(value => {
if (!isNaN(value)) {
notNumber = false;
let decimal = ('' + value).split('.')[1];
precisions.push(decimal ? decimal.length : 0);
}
});
if (!notNumber) {
fenceSums[columnIndex] = values.avg()
} else {
fenceSums[columnIndex] = '';
}
}
})
// 返回一个二维数组的表尾合计
return [means, fenceSums]
}