1.0.20 • Published 4 years ago

@beisen-platform/ux-standard-table v1.0.20

Weekly downloads
1
License
ISC
Repository
-
Last release
4 years ago
属性说明
属性说明类型默认值
loadingtable组件loading状态boolfalse
singleCheckedtable是否是单选boolfalse
selectedDatatable默认选中数据的idsarray[]
onSelecttable行选中之后的回调函数,selectedItems:table选中行的所有数据,与metadata中的biz_data中行记录结构一致,outsideSelectedIds是selectedData的子集,排除了table操作过程中取消选中的那部分selectedData的数据function (selectedItems, outsideSelectedIds) {}-
reloadData重新加载table列表数据function (tableMetaData, reloadReson) {}[]
onCrossPageSelectChangedtable跨页全选点击回调function (isActive) {}bool
tableSizetable组件的渲染的模式,stretch: 自动充满父容器,滚动条在table内部。Auto: table根据自身高度渲染,滚动条出现在外部stringAuto
tableContainer配置tableSize为stretch的时候使用,父容器的DOMDOMtable组件所在的parentElement
containerHeight给table一个计算好的显式高度int-
containerWidth给table一个计算好的显式宽度int-
ext_genColDef重写某个列function (colData, index, column) {}-
ext_getColumns重写列(拿到所有的列)function (columns) {}-
columnConfigUrl获取表格列配置项接口URLstring/api/v2/UI/CustomListView
defaultExpandKeys默认展开行的key数组array[]
expandColumnKeys可点击展开列的字段名数组array[]
expandedRowRender设置展开的行渲染内容function(rowData, rowIndex)如果是可展开,此项是必填
ellipsis内容超过单元格宽度是否显示...,默认为false,也就是会换行booleanfalse强烈建议不要设置为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>);
  }