1、EditableProTable表头加过滤
除了类似Table里的filterDropdown，必须要加一个多余的filters才行，才能在request里捕捉到filter
<EditableProTable
controlled
scroll={{ x: 'max-content' }}
size="small"
rowKey="id"
toolBarRender={false}
title={() =>
`UNI扩容10GE端口规模${uniExpandScale || 0}G,NNI扩容需求(含组网、OLT)${
nniExpandScale || 0
}G`
}
columns={
tableStructMap && tableStructMap[TableName] && tableStructMap[TableName].struct
? tableStructMap[TableName]?.struct
.sort((a: any, b: any) => a.colid - b.colid)
.map((col: { content: string; columnName: string }) => {
if (col.columnName !== 'demand_expansion') {
return {
title: col.content,
dataIndex: col.columnName,
key: col.columnName,
readonly: true,
align: 'center',
sorter: (a: any, b: any) => a[col.columnName] - b[col.columnName],
filters: [
{
text: 'London',
value: 'London',
},
{
text: 'New York',
value: 'New York',
},
],
filterIcon: (filtered: boolean) => (
<FilterOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
),
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
}) => (
<div style={{ padding: 8, maxWidth: 300 }}>
<div className={styles['filter-entry-item']}>
{getColumnFilterEntryComponent(col, {
setSelectedKeys,
selectedKeys,
confirm,
})}
</div>
<div className={styles['filter-action']}>
<Button
type="primary"
onClick={() => confirm()}
icon={<SearchOutlined />}
size="small"
style={{ width: 80 }}
>
搜索
</Button>
<Button
onClick={() => {
if (clearFilters) {
clearFilters();
// confirm();
}
}}
size="small"
style={{ width: 80 }}
>
重置
</Button>
</div>
</div>
),
};
} else {
return {
title: col.content,
dataIndex: col.columnName,
key: col.columnName,
align: 'center',
sorter: (a: any, b: any) => a[col.columnName] - b[col.columnName],
filterIcon: (filtered: boolean) => (
<FilterOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
),
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters,
}) => (
<div style={{ padding: 8, maxWidth: 300 }}>
<div className={styles['filter-entry-item']}>
{getColumnFilterEntryComponent(col, {
setSelectedKeys,
selectedKeys,
confirm,
})}
</div>
<div className={styles['filter-action']}>
<Button
type="primary"
onClick={() => confirm()}
icon={<SearchOutlined />}
size="small"
style={{ width: 80 }}
>
搜索
</Button>
<Button
onClick={() => {
if (clearFilters) {
clearFilters();
// confirm();
}
}}
size="small"
style={{ width: 80 }}
>
重置
</Button>
</div>
</div>
),
renderFormItem: (item: any, config: any) => {
const { fieldProps, formItemProps } = config;
return (
<InputNumber
// 组件的配置
{...fieldProps}
{...formItemProps}
// 自定义配置
min={0}
max={100000000}
placeholder="请输入"
/>
);
},
};
}
})
.concat([
{
title: '操作',
valueType: 'option',
width: 100,
fixed: 'right',
render: (text, record, _, action) => [
<a
key="editable"
onClick={() => {
action?.startEditable?.(record.id);
}}
>
编辑
</a>,
],
},
])
: []
}
recordCreatorProps={false}
editable={{
type: 'multiple',
editableKeys,
onSave: async (rowKey, data, row) => {
await waitTime(200);
updateKpiItem(row);
},
onChange: setEditableRowKeys,
actionRender: (row, config, dom) => [dom.save, dom.cancel],
}}
value={tableDataList}
onChange={(list: any) => {
console.log('xxx4', list);
setTableDataList(list);
}}
pagination={{
defaultCurrent: 1,
total: totalCount,
pageSize: defaultSize,
showSizeChanger: false,
showTotal: (total) => `共${total} 条数据`,
onChange: (page) => {
setPageNum(page);
},
}}
request={async (
//触发排序事件
// 第一个参数 params 查询表单和 params 参数的结合
// 第一个参数中一定会有 pageSize 和 current ，这两个参数是 antd 的规范
params: T & {
pageSize: number;
current: number;
},
sort,
filter,
) => {
console.log('sort', sort, filter);
const target = Object.values(sort);
if (target && target.length && target[0]) {
const result = {
columnsKey: Object.keys(sort)[0],
orderBy: target[0] === 'ascend' ? 'asc' : 'desc',
};
setSorterMap(result);
} else {
setSorterMap({});
}
setFilterMap(filter);
}}
/>
2、echarts x轴分组展示
