You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
6.9 KiB
87 lines
6.9 KiB
6 years ago
|
## Table
|
||
|
|
|
||
|
|
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
|
||
|
|
|
||
|
|
### Table props
|
||
|
|
|
||
|
|
属性 | 说明 | 类型 | 可选值 | 默认值
|
||
|
|
--- | --- | --- | --- | ---
|
||
|
|
data | 数据 | Array | — | —
|
||
|
|
default-column-width | 默认最小列宽 | Number | — | 80
|
||
|
|
fit | 未设置 width 的列是否可以平分表格剩余宽度 | Boolean | — | true
|
||
|
|
stripe | 是否斑马纹表格 | Boolean | — | false
|
||
|
|
border | 是否带纵向边框表格 | Boolean | — | false
|
||
|
|
height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 | String / Number | — | —
|
||
|
|
restrict | 是否将 Table 限定在父容器内，当 Table 的高度超过父容器时，将出现垂直滚动条 | Boolean | — | false
|
||
|
|
affix | 吸附在距离窗口顶部固定位置的效果，可直接传距离 | Boolean / Number | — | false
|
||
|
|
empty-text | 数据为空时显示的文本 | String | — | 暂无数据
|
||
|
|
default-sort | 默认排序列的 prop 和顺序 | Object | { prop: String, order: 'asc' / 'desc' } | —
|
||
|
|
default-sort-orders | 点击表头文字，排序规则轮转顺序，数组元素可选值：asc 表示升序，desc 表示降序，null 表示还原为原始顺序 | Array | — | ['asc', 'desc']
|
||
|
|
default-expand-all | 是否默认展开所有行 | Boolean | — | false
|
||
|
|
expand-row-keys | 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组 | Array | —
|
||
|
|
cell-span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | —
|
||
|
|
row-key | 表格行的 key 值，用于优化渲染。当 reserve-states / internal-paging 为 true 时，必须设置该属性 | String | — | —
|
||
|
|
reserve-states | 数据实例改变后是否保存多选、展开等状态，需要设置 row-key | Boolean | — | false
|
||
|
|
children-prop | 数据结构为树结构时，叶子节点数组的对应属性名称，注意树结构的数据只能使用自定义排序 | String | — | children
|
||
|
|
default-unfold-children | 数据结构为树结构时，是否默认展开所有的叶子节点 | Boolean | — | false
|
||
|
|
show-header | 是否显示表头 | String | — | true
|
||
|
|
internal-paging | 是否启用内部分页模式：实际显示的表格行数不会超过 row-limit，建议数据量过多时开启以提升性能，需要设置 row-key | Boolean | — | false
|
||
|
|
row-limit | 最大行数限制 | Number | — | 100
|
||
|
|
paging-active-distance | 未设置 table 高度时，激活上一页/下一页时的边界距离 | Number | — | 300
|
||
|
|
reverse-scroll-y | 是否反转 Y 轴滚轮，当该值为 true 时，滚动 Y 轴将控制水平方向的滚动 | Boolean | — | true
|
||
|
|
scroll-bar-class | 自定义滚动条样式名称 | String | — | —
|
||
|
|
|
||
|
|
### Table events
|
||
|
|
|
||
|
|
事件名称 | 说明 | 回调参数
|
||
|
|
--- | --- | ---
|
||
|
|
on-select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row
|
||
|
|
on-select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection
|
||
|
|
on-selection-change | 当选择项发生变化时会触发该事件 | selection
|
||
|
|
on-expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows
|
||
|
|
on-unfolded-change | 当用户展开或者关闭树节点表格时会触发该事件 | row, unfoldedRows
|
||
|
|
on-sort-change | 当表格的排序条件发生变化时触发的事件 | column, prop, order
|
||
|
|
on-hit | 当表格内容滚动到边界时触发该事件，参数为边界位置信息 | 'left' / 'right' / 'top' / 'bottom'
|
||
|
|
|
||
|
|
### Table methods
|
||
|
|
|
||
|
|
方法名 | 说明 | 参数
|
||
|
|
--- | --- | ---
|
||
|
|
doLayout | 对 Table 进行重新布局 | —
|
||
|
|
clearSelection | 用于多选表格，清空用户的选择 | —
|
||
|
|
toggleAllSelection | 用于多选表格，切换所有行的选中状态 | —
|
||
|
|
toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected
|
||
|
|
toggleRowExpansion| 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded
|
||
|
|
toggleRowUnfolding| 用于树结构表格，切换某一行的节点状态，如果使用了第二个参数，则是设置该节点的子节点是否显示（unfolded 为 true 则显示） | row, unfolded
|
||
|
|
clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | —
|
||
|
|
sort | 手动对 Table 进行排序。参数 prop 属性指定排序列，order 指定排序顺序 | prop: String, order: asc / desc
|
||
|
|
setScrollPosition | 设置滚动条的位置 | left / right / top / bottom
|
||
|
|
|
||
|
|
### TableColumn props
|
||
|
|
|
||
|
|
属性 | 说明 | 类型 | 可选值 | 默认值
|
||
|
|
--- | --- | --- | --- | ---
|
||
|
|
type | 列的类型 | String | selection / expand | —
|
||
|
|
label | 表头内容 | String | — | —
|
||
|
|
prop | 表格内容对应的属性，支持多层访问：如 'user.address[0].city' | String | — | —
|
||
|
|
width | 列宽，单位为 px(只支持数值型的格式，如 400) | Number / String | — | —
|
||
|
|
fixed | 是否固定列，true 等价于 left | Boolean / String | true / left / right | false
|
||
|
|
sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望自定义排序，需要监听 Table 的 on-sort-change 事件 | Boolean / String | true / false / 'custom' | false
|
||
|
|
sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(cellA, cellB, rowA, rowB) | — | —
|
||
|
|
sort-orders | 点击表头文字，排序规则轮转顺序，数组元素可选值：asc 表示升序，desc 表示降序，null 表示还原为原始顺序，当前列的该属性会覆盖 default-sort-orders 的值 | Array | — | ['asc', 'desc']
|
||
|
|
resizable | 是否可以通过拖拽右侧边框改变列宽 | Boolean | — | true
|
||
|
|
formatter | 格式化内容的函数 | Function(row, column, cellValue, rowIndex, columnIndex) | — | —
|
||
|
|
align | 单元格对齐方式 | String | left / center / right | left
|
||
|
|
header-align | 表头对齐方式（当值为 right 时，prepend 插槽和 append 插槽的位置互换） | String | left / center / right | left
|
||
|
|
|
||
|
|
### TableColumn scoped slots
|
||
|
|
|
||
|
|
名称 | 说明
|
||
|
|
--- | ---
|
||
|
|
header | 自定义表头的内容，参数为 { column, $index }
|
||
|
|
content | 自定义列的内容，参数为 { row, column, content, $rowIndex, $columnIndex }
|
||
|
|
expand | 展开行的内容，参数为 { row, $index }
|
||
|
|
prepend | 表头前置插槽，可以在不破坏原有表头功能的基础上进行额外扩展，参数为 { column, $index }
|
||
|
|
append | 表头后置插槽，可以在不破坏原有表头功能的基础上进行额外扩展，参数为 { column, $index }
|
||
|
|
headerText | 表头文本插槽，可以在不破坏原有表头功能的基础上进行额外扩展，参数为 { column, $index }
|