Component API
raypeng edited this page Jul 27, 2019
·
12 revisions
datas // 表格数据
record-table-select // 是否记录表格的选项id(必须保证行ID存在，且唯一) 默认为false
drop-action 是否开启掉落元素。（注：就是在表格列中多加一项，用来解决拖动表格引起的表格宽度变小问题，多加一列，页面是看不见的。） 默认为 true
border 是否显示纵向边框 默认 true
show-summary 是否需要合计 默认 false
highlight-current-row // 是否要高亮当前行
stripe 是否为斑马纹 table 默认 false
highlight-current-row 是否要高亮当前行 boolean 默认为false
sum-text 合计行第一列的文本 String 默认为合计
row-key 支持树类型的数据。此时，必须要指定 row-key
rolling-loading: { default: true, type: Boolean }, // 是否开启滚动加载
offset: { default: 0, type: [Number, String] }, // 列表滚动到距离底部小于0px,即可触发数据加载的回调（主要用于表格如果每页大量数据）
rolling-loading-size: { default: 5, type: [Number, String] }, // 滚动加载条数（主要用于表格如果每页大量数据）
row-height: { default: 60, type: [Number, String] }, // 表体的行高 （注意：一定是你css样式给定的高度）
height-change: { default: true, type: Boolean } // 是否开启表格高度随数据多少而变化，如数据少的时候，想把分页放在底部（永远处于底部）
total-option 需要合计的选项（需要开启showSummary：true）
totalOption格式如下 = [{
label: '金额', // 需要合计的表头名
unit: '元' // 合计出来的单位名
}]
this.$refs.plTable.toggleAllSelection() 用于多选表格，切换所有行的选中状态
this.$refs.plTable.clearSelection() 用于表格多选，清空用户的选择
this.$refs.plTable.toggleRowSelection(rows) 用于表格多选，切换某一行的选中状态，
rows数据格式: [
{ row: row, 需要显示的行row obj
selected: true 设置这一行选中与否（selected 为 true 则选中） Boolean
注意： 1. selected不传，则代表当前row为不勾选
2. selected传了值(必须为false，则代表当前row为不勾选,其他值都是为勾选（TS写法无效）)
}
]
this.$refs.plTable.setHeight() // 当窗口高度变化或者外层高度变化，就调用该方法
@table-select-change 整个表格Checkbox选中的row的id数组, 必须保证row（表格的行数据）存在id且唯一，没有ID可以自己造
// 当@handle-selection-change || @select || @select-all事件触发，就会触发这个事件 （可以用来回显表格勾选状态）
// 参数为 tableSelectData， cancelSelectData
// 第一个参数是当前表格（含分页）选中项id数组 第二个参数是当前表格（含分页）取消项id数组
// 注意： 该事件触发方式 需要设置表格属性 record-table-select：true// 具体看表格属性
@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 当选择项发生变化时会触发该事件 参数为当前选中的值
@header-dragend 当拖动表头改变了列的宽度的时候会触发该事件 参数为newWidth, oldWidth, column, event
paginationShow 是否需要分页器 默认是true
pagerCount 页码按钮的数量，当总页数超过该值时会折叠
page-sizes 每页显示个数选择器的选项设置 [number， number，number] 默认值 [10, 20, 30, 50]
ptTotal 数据总条数
pageSize 每页条数
currentPage 当前页
paginationLayout 组件布局，子组件名用逗号分隔 (默认值 'total, sizes, prev, pager, next, jumper')
@handlePageSize 获取当前分页的数据 参数为 page 和 size
dialogData 选择显示字段数组
showAmend 是否显示修改字段名按钮 默认值为 false
fieldTitle 弹框的标题 默认为'选择显示字段'
amendBtnIcon 修改字段名按钮的图标字体 (必须是iconfont字体) 默认为 'el-icon-edit'
field-sort 显示字段是否排序 默认值为 true （使用排序前 先安装vuedraggable， npm i vuedraggable）
dialogData格式如下 [{
name: '我的', // 字段名
state: true, // 选择状态
disabled: true // 是否禁用
}]
@amend-field // 修改单个字段按钮点击事件 参数为 row, index
@show-field // 获取当前的需要显示的字段 参数为当前的字段数组
this.$refs.plTable.plDialogOpens() // 打开弹窗