分布式调度框架。
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.
 
 
 
 
 
 

6.9 KiB

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 }