PolyvUI 使用文档

# Table 表格

基础用法
显示代码
对齐方式
列的对齐方式优先于表格的对齐方式，若不设置则按照表格的对齐方式排列。
显示代码
自定义行 & 列样式
传入 `Function` 时会根据返回值进行样式更改。
显示代码
自定义单元格内容
显示代码
单选列
显示代码
多选列
显示代码
排序
显示代码
固定主体高度
显示代码
固定列
显示代码
序号列
显示代码
自定义头部
显示代码
使用表单元素
显示代码
分页器
显示代码
空状态
显示代码
表格头部提示
显示代码
单元格提示
显示代码
最小宽度
显示代码
文本截断提示
显示代码
小型表格
显示代码
简洁模式
显示代码
Table Attributes
参数 说明 类型 可选值 默认值
data 显示的数据，优先级高于 dataSource 的 contents Array - -
height 主体高度 Number - -
max-height 主体最大高度 Number - -
show-header 是否显示表头 Boolean - -
row-key 当前行key值的获取，传入方法时附带(rowData)参数 String Function - -
row-style 行的样式，传入方法时附带({ rowData, rowIndex })参数 Object Function String - -
row-class-name 行的className，传入方法时附带({ rowData, rowIndex })参数 String Function Array - -
cell-style 单元格的样式，传入方法时附带({ rowData, rowIndex, columnIndex })参数 Object Function String - -
cell-class-name 单元格的className，传入方法时附带({ rowData, rowIndex, columnIndex })参数 String Function Array - -
formatter 格式化单元格内容，传入方法附带参数({ rowData, rowIndex, columnIndex, prop, cellValue }) Function - -
collapse-color 是否显示隔行背景颜色 Boolean - true
align 表格的对齐方式 String center left right center
sort-prop 表格排序字段，需要绑定.sync String - -
sort-order 表格排序方式，需要绑定.sync String desc asc -
empty-text 空状态的占位文本 String - 暂无数据
empty-type 空状态类型 String 同 empty 组件 normal
empty-options 空状态额外参数 String - -
data-source 表格资源，支持.sync双向绑定 Object - -
data-source-field 表格资源自定义字段 Object - -
pagination-options 表格分页器参数，优先级最高 Object - -
size 表格尺寸 String small -
concise 简洁模式 Boolean - false

dataSourceField 默认字段名 { contents: 'contents', pageNumber: 'pageNumber', pageSize: 'pageSize', totalItems: 'totalItems' }

Table Methods
方法名 说明 参数
clearSelection 多选表格下清空所有选择 -
toggleRowSelection 多选表格下设置某一行的选中状态 rowIndex: Number, selected: Boolean = true
toggleAllSelection 多选表格下设置所有行为选中状态 -
toggleRowRadio 单选表格下切换到某一行为选中状态 rowIndex: Number
Table Events
事件名称 说明 回调参数
cellClick 单元格点击时触发 { rowData, rowIndex, columnIndex, prop, event }
rowClick 行被点击时触发 { rowData, rowIndex, event }
headerClick 某一列的表头被点击时触发 { columnIndex, prop, event }
sortChange 表格排序条件发生改变时触发 { columnIndex, sortProp, sortOrder }
currentPageChange 表格分页器当前页数被改变 当前页
pageSizeChange 表格分页器每页数量被改变 每页数量
pageDataChange 表格分页数据被改变，即当前页或每页数量被改变 { currentPage, pageNumber, pageSize }
body-scroll 表格主体滚动事件 target
Table Slot
name 说明
emptyPicture 空状态图片位置插槽
emptyDescription 空状态描述文案插槽
Table-column Attributes
参数 说明 类型 可选值 默认值
type 列的类型, multiple: 复选列, single: 单选列, index: 序号列 String multiple single index -
title 列的标题 String - -
prop 对应列内容的字段名 String - -
width 列宽 String - -
sortable 该列是否可以排序 String - false
fixed 固定列 String left right -
ellipsis 过长时是否隐藏 Boolean - false
align 该列的对齐方式，不设置则默认为表格对齐方式 String center left right -
header-align 表头对齐方式，不设置则默认为列的对齐方式 String center left right -
multiple-value 多选时选中的值，需要绑定.sync Array - -
multiple-disabled 列为复选列时控制该行是否禁用复选框，类型为Function，传入参数({ rowData, rowIndex })，返回布尔值 Function - -
multiple-header-visible 该列标题栏是否显示全选选择框 Boolean - true
single-value 单选时选中的值，需要绑定.sync String Number - -
single-disabled 列为单选列时控制该行是否禁用单选框，类型为Function，传入参数({ rowData, rowIndex })，返回布尔值 Function - -
page-number 序号列时的当前页 Number - 1
page-size 序号列时的每页数量 Number - 10
header-tips 表格头部提示 String - -
header-tips-options 表格头部提示tooltip额外参数 Object - -
header-tips-icon 表格头部提示图标 String - info-circle
cell-tips 单元格提示 String Object Function({ rowData, rowIndex, column, columnIndex, prop }) - -
cell-tips-options 单元格提示tooltip额外参数 Object - -
min-width 最小宽度，会将剩余宽度均分给没设置宽度的列，若均分后列的宽度小于 min-width 时会将该值设置为该列的宽度 String Number - 0
ellipsis-tips 文本过长时，鼠标移入是否显示气泡提示 Boolean - true
ellipsis-tips-options 文本过长截断时的气泡提示参数 Object - -
Table-column Events
事件名称 说明 回调参数
multipleChange 多选下用户点击行的checkbox或全选时触发 { multipleValue, rowData, rowIndex, checked }
singleChange 单选下用户点击行的radio时触发 { singleValue, rowData, rowIndex }
Table-column Slot
name 说明
- 自定义该列单元格内容，参数：{ rowData, rowIndex, columnIndex }
header 自定义该列的表头内容，参数：{ columnIndex }

← WordLabelList 文本标签列表 →