@beisen-platform/ux-standard-table
v1.0.20
Published
用于大量结构化的数据展示,有排序、分页、自定义操作列,支持头部冻结、首尾列冻结;宽度有紧凑、始终、宽松三种模式
Downloads
94
Readme
属性说明
| 属性 | 说明 | 类型 | 默认值 |
| ----- | ---- | ---- | ---- |
| loading
| table组件loading状态 | bool
| false
|
| singleChecked
| table是否是单选 | bool
| false
|
| selectedData
| table默认选中数据的ids | array
| []
|
| onSelect
| table行选中之后的回调函数,selectedItems:table选中行的所有数据,与metadata中的biz_data中行记录结构一致,outsideSelectedIds是selectedData的子集,排除了table操作过程中取消选中的那部分selectedData的数据 | function (selectedItems, outsideSelectedIds) {}
| - |
| reloadData
| 重新加载table列表数据 | function (tableMetaData, reloadReson) {}
| []
|
| onCrossPageSelectChanged
| table跨页全选点击回调 | function (isActive) {}
| bool
|
| tableSize
| table组件的渲染的模式,stretch: 自动充满父容器,滚动条在table内部。Auto: table根据自身高度渲染,滚动条出现在外部 | string
| Auto
|
| tableContainer
| 配置tableSize为stretch的时候使用,父容器的DOM | DOM
| table组件所在的parentElement
|
| containerHeight
| 给table一个计算好的显式高度 | int
| - |
| containerWidth
| 给table一个计算好的显式宽度 | int
| - |
| ext_genColDef
| 重写某个列 | function (colData, index, column) {}
| - |
| ext_getColumns
| 重写列(拿到所有的列) | function (columns) {}
| - |
| columnConfigUrl
| 获取表格列配置项接口URL | string
| /api/v2/UI/CustomListView
|
| defaultExpandKeys
| 默认展开行的key数组 | array
| [] | 否 | |
| expandColumnKeys
| 可点击展开列的字段名
数组 | array
| [] | 否 | |
| expandedRowRender
| 设置展开的行渲染内容 | function(rowData, rowIndex)
| 无 | 否 | 如果是可展开,此项是必填 |
| ellipsis
| 内容超过单元格宽度是否显示...,默认为false,也就是会换行 | boolean
| false | 否 | 强烈建议不要设置为true,会导致性能问题(数据量过大) |
DataTable使用方式
<DataTable
{...this.tableDefin} //table的元数据,平台配置生成
loading={this.state.isTableFetching} //table组件loading状态
singleChecked={this.props.singleChecked} //table是否是单选
onSelect={this.handleDataRowChecked.bind(this)} //table 行选中之后的回调
selectedData={this.props.resultsData} //当前table已经选中的数据
reloadData={this.reloadDataTable.bind(this)} //重新刷新当前table
onCrossPageSelectChanged={this.handleDataTableCrossPageSelect.bind(this)} //跨页全选状态选择后的回调实践
tableSize={this.props.stretch ? 'stretch' : 'Auto'} //table组件的渲染的模式,stretch: 自动充满父容器,滚动条在table内部。Auto: table根据自身高度渲染,滚动条出现在外部
tableContainer={this.props.tableContainer || dataGrid.parentElement}
containerHeight={this.props.containerHeight} //提供一个计算好的高度,table渲染到这个高度内
containerWidth={this.props.containerWidth} //提供一个计算好的宽度,table选择到这个宽度内
mainObjectContext={this.props.mainObjectContext || null} //上下文相关,用于当当前table数据属于子对象的时候,mainObjectContext传递是主对象相关的信息,包含PObjectDataID,parentDataId,parentMetaObjName,用于行操作的逻辑处理
ext_genColDef={this.genCustomColDef}
ext_getColumns={this.genCustomColumns}
/>
自定义列渲染
// 请参考参考基础表格columns属性配置
let column = {
dataIndex: string, //列唯一ID
name: string, //列名
title: string, //列表头显示
sorter: string, //列唯一ID
visible: bool, //是否可见
fixed: string, // left/right
width: number, // 后端接口给的宽度居然是 string 转换成数字再传递
toolTip:bool/function // 省略号时显示的tooltip
};
// v:当前列数据,data:当前行数据,index:当前行序号,isExpand:当前行的展开状态
column.render = (v, data, index, isExpand) => {
return (<div onClick={() => {
// 自定义列是否支持点击打开
handleExpand(data, isExpand)
}}>
自定义渲染
</div>);
}