配置项

import { defineTRConfig } from '@hamlet/render'

const config = defineTRConfig({
    // 具体配置项
})

import { defineTRConfig } from '@hamlet/render'

const config = defineTRConfig({
    // 具体配置项
})

目前 table-render 支持以下配置项。

配置项

参数	描述	类型	默认值	是否必填
type	表格类型，可选值 crud \| list	`string`	list
api	请求 API 地址	API
manual	是否手动触发请求	`boolean`	false
fit	是否自动撑开	`boolean`	true
card	是否卡片展示形式	`boolean`	true
columns	列设置	TableColumn		是
rowSelection	选择列	RowSelection
defaultSearchFormData	设置默认查询条件	`AnyObject`
conditionFilter	查询条件过滤，点击查询按钮请求列表接口前回调	`(data: AnyObject) => AnyObject`
conditionSaved	查询条件是否可保存	`boolean`	true
formatData	列表数据自定义	`(data: AnyObject) => {list: AnyObject[], total: number}`
indexColumn	是否显示索引序号	`boolean \| {width: number, label: string}`	true
rowKey	表格键值	`string`	id
pageNoKey	第几页 key 值	`string`	pageNo
pageSizeKey	每页显示条目个数 key 值	`string`	pageSize
highlightCurrentRow	是否要高亮当前行	`boolean`	false
scrollbarAlwaysOn	总是显示滚动条	`boolean`	true
pagination	分页配置	`boolean` / Pagination
cacheKey	缓存 key，列设置和条件组合保存使用	`string`
filters	筛选条件	Filter
filtersColumn	筛选列设置	`AnyObject`
buttons	按钮块	Buttons
toolbar	是否显示表格工具栏	`boolean`	true
showColumnsSetting	是否显示列设置	`boolean`	true
defaultExpandAll	是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	`boolean`
lazy	是否懒加载子节点数据	`boolean`
maxHeight	Table 的最大高度。合法的值为数字或者单位为 px 的高度。	`string`\| `number`
treeProps	渲染嵌套数据的配置选项，参考 `ElTable`	`object`
showSummary	是否在表尾显示合计行	`boolean`
summaryMethod	自定义的合计计算方法，参考 `ElTable`	`SummaryMethod<void>`
tableLayout	设置表格单元、行和列的布局方式	'fixed' \| 'auto'	fixed
spanMethod	单元格合并，参考 `ElTable`
beforeFilterSearch	搜索前回调，返回 false 不执行查询	`(data: AnyObject) => boolean`
searchExpand	搜索栏是否默认展开	`boolean`	false
customFilter	列配置是否显示自定义筛选列	`boolean`	false
searchReset	搜索重置回调	`() => void`
initCallback	表格加载初始化回调	`() => void`
stripe	是否为斑马纹 table	`boolean`	false
emptyText	空数据时显示的文本内容	`string`	No Data
beforeSearchReset	重置前回调，返回 false 不执行查询	`(data: AnyObject) => boolean`
searchLabelPosition	搜索标签位置	`top \| left \| right`
filterChange	列筛选变化回调	`(...args: any[]) => void`

API

遵循 {method}:{url} 规则。method 请求方式，非必填；url 请求地址，必填项。

/mall/admin/order/list 等同于 get:/mall/admin/order/list

TableRender Exposes

参数	描述	类型
selectedRowKeys	多选 key 值	`string[]`
selectedRows	多选行值	`Record<sting, any>[]`
searchFormData	筛选条件值	`Record<sting, any>`
pageSize	每页显示条目个数	`number`
currentPage	当前页数	`number`
sort	排序
getTableInstance	获取 ElTable 实例	`() => ElTableRef`
setSearchFieldValue	设置查询条件值	`(name: string, value: any) => void`
loadTableData	请求表格数据	`({page, size, sort}) => void`

TableRender Emits

参数	描述	回调参数
table-data-change	列表数据回调事件	list
row-click	当某一行被点击时会触发该事件	row, column, event
cell-click	当某个单元格被点击时会触发该事件	prop, value
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow, oldCurrentRow
column-setting-change	列设置变更回调	columnSetting

Filter

更多属性配置参考 TableColumn.Filter

参数	描述	类型	默认值	是否必填
label	标签名	`string`		是
prop	键名	`string`		是
type	控件类型	`string`	input
slot	是否使用自定义插槽，命名规则`ham-search-{prop}`	`boolean`

TableColumn

表格列

参数	描述	类型	是否必填
label	标签名	`string`	是
prop	键名	`string`	是
type	列类型，值可以是日期`date`，对象`mapping`，字典`dict`，操作栏`operation`，链接`link`，开关`switch`，标签`tag`	`string`
width	列宽度	`string` \| `number`
minWidth	对应列的最小宽度	`string` \| `number`
fixed	是否固定列，可以是布尔值，也可以是 `left`，`right`	`boolean` \| `string`
sortable	是否支持排序	`boolean`
sortBy	指定数据按照哪个属性进行排序	`(row: any, index: number) => string/string/object`
tag	是否开启标签模式，只在type为 dict 和 mapping 时生效	`boolean`
getTagColor	标签颜色	`(row: AnyObject, option: AnyObject) => string`
slot	是否使用自定义插槽，命名规则`column-{prop}`	`boolean`
headerSlot	是否使用自定义表头插槽，命名规则`column-header-{prop}`	`boolean`
format	格式化，type 为 date 生效，参考 dayjs 格式化参数 `YYYY-MM-DD HH:mm:ss`	`string`
ellipsis	文本溢出是否...显示	`boolean`
align	对齐方式，可以是 `left` \| `center` \| `right`	`string`
map	对象，type 为 mapping 时生效	`Record<string, any>`
dictCode	字典 code，type 为 dictSelect 时生效	`string`
formatter	格式化	`(row, column, cellValue, index) => string`
filter	是否设置为筛选条件	TableColumn.Filter \| `boolean`
filters	数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。数组中的每个元素都需要有 text 和 value 属性。	`Array<{text: string, value: string}>`
filterMethod	数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。	`function(value, row, column)`
switch	开关配置，type 为 switch 时生效	TableColumnSwitch
buttons	操作按钮， type 为 operation 时生效	TableColumn.Button[]
onClick	点击回调事件，type 为 link 时生效	`(row: AnyObject) => void`
children	子级	`TableColumn[]`
className	列的 className	`string`

TableColumn.Filter

列刷选

TIP

此处只列出通用的一些属性，更多参数请参考 type 对应表单控件，这里不做详细描述。

参数	描述	类型	默认值
type	控件类型，可选值文本框`input`，下拉选`select`，日期`datePicker`，字典下拉`dictSelect`，组合网格`comboGrid`	`string`	`input`
placeholder	占位文本	`string`
slot	是否使用插槽，命名规则`ham-search-{prop}`	`boolean`
clearable	是否可清空	`boolean`
style	样式	`string` \| `AnyObject`
emitType	触发搜索方式，回车触发`enter`，搜索值改变直接触发`change`	`string`
labelWidth	筛选项label宽度	`number` \| `string`

TableColumn.Button

列按钮

参数	描述	类型	默认值	是否必填
label	按钮名称	`string`		是
type	按钮类型，primary \| success \| warning \| danger \| info	`string`	`primary`
style	按钮样式	`string`
label	按钮名称	`string`
actionTemplate	继承模板 key 值，可选`delete`	`string`
actionType	操作类型，可选值 `messageBox`， `popconfirm`	`string`
messageBox	确认框， actionType 值为 messageBox 时生效	MessageBox
popconfirm	气泡确认框,当 actionType=popconfirm 时生效	Popconfirm
permissionCode	按钮权限 CODE，优先级高于 visible，在 @gauss/prime 框架内生效	`string`
visible	是否显示	`(row: AnyObject) => boolean`
onClick	触发点击回调函数	`(row: AnyObject) => void`

TableColumnSwitch

参数	描述	类型
width	宽度	`string` \| `number`
inlinePrompt	无论图标或文本是否显示在点内，只会呈现文本的第一个字符	`boolean`
activeText	switch 打开时的文字描述	`string`
inactiveText	switch 的状态为 off 时的文字描述	`string`
activeValue	switch 状态为 on 时的值	`boolean` \| `string` \| `number`
inactiveValue	switch 状态为 off 时的值	`boolean` \| `string` \| `number`
onChange	变更事件	`(row: AnyObject) => void`

RowSelection

多选

参数	描述	类型	默认值	是否必填
onChange	列选择变更回到事件	`(rows: Record<string, any>[]) => void`
selectable	当前行是否可被选中	`(row: Record<string, any>, index: number) => boolean`

Buttons

按钮块

参数	描述	类型	是否必填
label	按钮名称	`string`	是
icon	按钮图标	`DefineComponent`
slot	是否使用插槽，用户自定义插槽名称	`string`
actionTemplate	继承模板 key 值，可选`delete`	`string`
permissionCode	按钮权限 CODE，优先级高于 visible，在 @gauss/prime 框架内生效	`string`
buttonType	按钮类型，可选值`primary` `warning` `danger` `success` `info`	`string`
actionType	操作类型，可选值 `messageBox`	`string`
messageBox	确认框， actionType 值为 messageBox 时生效	MessageBox
disabled	是否禁用	`(instance: Instance) => boolean`
visible	是否可见	`(instance: Instance) => boolean`
onClick	触发点击回调函数	`() => void`

actionTemplate 设置为 delete 时，等同于

{
    label: '删除',
    disabled(instance) {
        return instance.selectedRowKeys.length === 0
    },
    actionType: 'messageBox',
    messageBox: {
        title: '删除',
        message: '确定要删除选择项么？',
        requestData(instance) {
            const { selectedRowKeys } = instance
            return selectedRowKeys
        },
    },
}

{
    label: '删除',
    disabled(instance) {
        return instance.selectedRowKeys.length === 0
    },
    actionType: 'messageBox',
    messageBox: {
        title: '删除',
        message: '确定要删除选择项么？',
        requestData(instance) {
            const { selectedRowKeys } = instance
            return selectedRowKeys
        },
    },
}

Pagination

分页

参数	描述	类型	默认值
defaultPageSize	每页显示条目个数	`number`	10
pageSizes	每页显示个数选择器的选项设置	`number[]`	[10, 20, 50, 100]
layout	组件布局，子组件名用逗号分隔	`string`	total, sizes, prev, pager, next, jumper
background	是否为分页按钮添加背景色	`boolean`	true

MessageBox

确认框

参数	描述	类型	是否必填
title	标题	`string`	是
message	正文内容	`string`	是
api	请求地址，支持文本模板字符串替换	API
requestData	点击确定触发请求前回调，可以处理传参	`(data: AnyObject) => any`
onSuccess	请求成功后回调	`() => void`
onError	请求失败回调	`(error: any) => void`
onComplete	请求成功或失败后回调	`() => void`

什么是文本模板字符串替换？

api: 'post:/mall/admin/order/delete?id={id}'

// => 最终内部会取行内的数据来替换 id
post:/mall/admin/order/delete?id=xxxxxxx

api: 'post:/mall/admin/order/delete?id={id}'

// => 最终内部会取行内的数据来替换 id
post:/mall/admin/order/delete?id=xxxxxxx

Popconfirm

气泡确认框

参数	描述	类型	是否必填
title	标题	`string`	是
api	请求地址，支持文本模板字符串替换	API
requestData	点击确定触发请求前回调，可以处理传参	`(data: AnyObject) => any`
onSuccess	请求成功后回调	`() => void`
onError	请求失败回调	`(error: any) => void`
onComplete	请求成功或失败后回调	`() => void`

示例

popconfirm: {
    title: '是否删除当前项？',
    api: 'post:/mall/admin/order/delete',
    requestData(row) {
        return [row.id]
    },
},

popconfirm: {
    title: '是否删除当前项？',
    api: 'post:/mall/admin/order/delete',
    requestData(row) {
        return [row.id]
    },
},

配置项 ​

配置项 ​

API ​

TableRender Exposes ​

TableRender Emits ​

Filter ​

TableColumn ​

TableColumn.Filter ​

TableColumn.Button ​

TableColumnSwitch ​

RowSelection ​

Buttons ​

Pagination ​

MessageBox ​

Popconfirm ​

配置项

配置项

API