eo-table

Insider

<eo-table>

Alias: <advanced.general-table>

通用表格构件

Properties

Name	Description	Type	Default	Required
showCard	是否显示外层卡片	boolean	true
rowSelection	表格行是否可选择，具体查阅：rowSelection	false | TableRowSelection<any>
rowKey	指定每一行的 key，不指定则默认为索引 index。强烈建议设置该属性，否则在某些情况下可能行为不如预期。	string
hiddenColumns	隐藏相应列（输入对应的 dataIndex 或者 key 即可）	Array<string | number>
showSelectInfo	是否显示已选择信息和清除按钮。仅在设置了rowSelection时有效。默认不显示	boolean	false
filters	表头过滤的过滤项，key 为 column 的 dataIndex，value 为过滤值集合。	Record<string, string[]>
configProps	ant-design 的 Table 相关配置项,具体查阅：Table，其中分页配置和行选择配值在构件中设置了常用的默认配置，也可自行覆盖，具体描述见下表	any
sort	被排序列的 dataIndex。通常来自于 url 参数，可以设置成 ${QUERY.sort}。	string | null
order	升序/降序，可以设置成 ${QUERY.order}。	string | number | null
rowDisabledConfig	配置每一行是否禁用，其中 field 表示数据源中的字段路径， value 表示与其字段比较的值， operator 表示两者比较的方法，结果为 true 时会禁用当前行, 需要注意的是该配置需要在 rowSelection: true 的前提下使用，并且设置 rowKey 属性赋予每行唯一的 key，防止顺序变化时造成的错误勾选（如上 demo 所示）	RowDisabledProps | RowDisabledProps[]
expandedRowBrick	自定义行展开的构件 UseBrickConf	{ useBrick?: UseSingleBrickConf }
expandIcon	自定义展开图标。	{ collapsedIcon: GeneralIconProps; expandedIcon: GeneralIconProps }	{collapsedIcon:{lib:'antd',icon:'down',theme:'outlined'},expandedIcon:{lib:'antd',icon:'right',theme:'outlined'}}
expandIconAsCell	展开的图标是否为一个单元格，默认显示在第一列；设置为 false 的时候，可以通过expandIconColumnIndex属性设置展开的图标在哪一列	boolean	true
expandIconColumnIndex	展开的图标显示在哪一列，如果没有 rowSelection，默认显示在第一列，否则显示在选择框后面。当expandIconAsCell为 false 时，该属性生效。	number
expandRowByClick	通过点击行来展开子行	boolean
optimizedColumns	优化渲染的列（输入对应的 dataIndex），针对配置了 useBrick 的列。当前 antd 在更新 state 的时候，会全量渲染单元格，如果确定某一列在后续操作中不需要重新渲染，例如仅作为展示的单元格，可通过该属性设置以优化性能。注意，在树形表格中，当某一列内包含展开/收起按钮，则不应该设置该列。	Array<string | number>
stripEmptyExpandableChildren	树形数据展示时是否需要去除空数组	boolean	false
defaultExpandAllRows	初始时，是否展开所有行	boolean
ellipsisInfo	是否显示省略信息	boolean
expandedRowKeys	展开的行的 rowKey	string[]
selectAllChildren	表格树形数据展示的时候，行选择父节点的时候是否同步勾选/取消勾选所有子节点，并且被同步勾选的子节点不能单独取消。注意，该属性必须设置 rowKey 属性。	boolean
defaultSelectAll	是否默认选择所有行。注意，该属性必须设置 rowKey 属性。	boolean
childrenColumnName	指定树形结构的列名	string	children
sortable	是否支持排序。默认开启，当对应列的sorter设置成true时则可排序。sortable为false时则排序都不生效。	boolean	true
frontSearch	是否前端进行搜索，配合presentational-bricks.brick-input使用	boolean
frontSearchQuery	前端搜索参数	string	""
exactSearch	是否精确搜索	boolean
frontSearchFilterKeys	进行前端搜索的字段，支持嵌套的写法如["name","value.a"]，不配置的时候默认为对所有 columns 的 dataIndex[]进行前端搜索	string[]
page	页码。后台搜索的时候一般不需要配置，列表接口返回格式通常为{list:[],page:1,pageSize:10,total:20}，即默认取自 page；前台搜索的时候，一般配置成 "${query.page=1|number}"	number
pageSize	页码条数。后台搜索的时候一般不需要配置，列表接口返回格式通常为{list:[],page:1,pageSize:10,total:20}，即默认取自 pageSize/page_size；前台搜索的时候，一般配置成 "${query.pageSize=10|number}"	number
scrollConfigs		TableProps<unknown>["scroll"]	{ x: true }
qField	把过滤条件更新到 url 时的字段名	string	"q"
tableDraggable	表格行是否可拖拽，注意，树形数据的表格不支持该功能	boolean
zebraPattern	是否展示斑马纹	boolean
storeCheckedByUrl	翻页时是否记住之前选中的项。注意，选中项的rowKey将保存在url中，如果不设置rowKey，该设置不生效。如果选择太多可能会造成url过长，请谨慎使用	boolean
extraRows	额外的行，通常为跨页勾选时，不在当前页的行	Record<string, unknown>[]	[]
autoSelectParentWhenAllChildrenSelected	当所有子节点选中时，自动选中父节点	boolean
thTransparent	表格表头是否透明	boolean
showHeader	是否显示表头	boolean	true
pagination	是否显示分页	false | TablePaginationConfig
size	表格大小（antd原生size）	SizeType | "x-small"
type	选框类型（单选/多选）	RowSelectionType
shouldUpdateUrlParams	是否更新 url 参数。设置为否之后，如果是后台进行分页/排序等功能，则需要结合事件进行编排。如果是前台进行分页/排序，则不需要。	boolean	true
shouldRenderWhenUrlParamsUpdate	更新 url 参数时是否触发页面重新渲染。仅在shouldUpdateUrlParams为true时有效。	boolean	true
selectedRowKeys	指定选中项的 key 数组	React.Key[]	[]

Events

Name	Description	Event Detail
page.update	页码变化,pagePath 可在 fields.page 中设置，默认为 page	Record<string, number>
filter.update	每页条数变化 ,pagePath 可在 fields.page 中设置,pageSizePath 可在 fields.pageSize 中设置，默认为 pageSize	Record<string, number>
select.update	勾选框变化，detail 中为所选的行数据	Record<string, any>[]
select.row.keys.update	勾选框变化，detail 中为所选的行key集合	string[]
sort.update	排序变化，detail 中的 sort 为对应排序列的 key/dataIndex，order 为升序/降序	{ sort: string; order: string | number }
row.expand	点击展开图标时触发的事件，事件详情中expanded为是否展开，record被点击的行信息	{ expanded: boolean; record: Record<string, any> }
expand.rows.change	展开的行变化时触发的事件，事件详情为当前展开的所有行的rowKey集合	{ expandedRows: React.Key[] }
row.drag	表格行拖拽结束发生的事件，事件详情为拖拽后重新排序的所有行数据	{ data: Record<string, any>[] }

Methods

Name	Description	Params	Returns
filterSourceData	搜索过滤	event: CustomEvent	void
expandAll	展开所有行

Type references

RowDisabledProps

Name	Type	Required	Description
field	string	✅
value	any	✅
operator	"$eq" | "$ne" | "$lt" | "$lte" | "$gt" | "$gte" | "$isEqual" | "$notEqual" | "$in" | "$nin" | "$exists"	✅