实现效果:
用到的属性:
filterDropdown:可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互;
filterIcon:自定义 filter 图标。结合Tooltip的onVisibleChange方法(显示隐藏的回调)
locale = {filterTitle:悬浮框显示的提示内容}
思路:
1.为提示图标添加Tooltip,利用ToolTip的显示隐藏回调函数(onVisibleChange),为该图标设置对应的提示文案。
filterIcon: (
<Tooltip title="默认" onVisibleChange={() => this.onVisibleChange(item.tipMsg)} placement="top">
<Icon type="question-circle-o" theme="outlined" />
</Tooltip>
),
onVisibleChange = (tips: string) => {
this.setState({tipMsg: tips});
};
2.在Table的locale对象中,讲tipMsg的值赋值给filterTitle
const locale = {
filterTitle: tipMsg || '默认',
};
注意事项:
要想实现提示内容的自定义,必须要里用onVisibleChange进行提示内容的绑定,否则提示内容会固定为“筛选”。
最后,附上代码:
背景:服务端动态返回table的表头和展示数据。
接口返回数据结构:
export type TsearchByMonthInfoSource = {
fontColor: string;
showValue: string;
};
export type TsearchByMonthInfoHead = {
headName: string;
orderFile: string; // 有值说明是排序字段
orderType: number; // 1:正序 0:倒序
tipMsg: string;
isFixed:boolean;
};
export type TsearchByMonthInfo = {
dataSource: TsearchByMonthInfoSource[][]; // table展示数据部分
tableHead: TsearchByMonthInfoHead[]; // 表头
};
代码实现:
// 第一步:请求接口,获取数据
searchAttendanceByMonth({
curPage,
dptList, //部门Id列表 ,
orgId,
orgList, //结构列表 ,
pageIndex, // 第几页 ,
pageSize, //每页几条 ,
userList, //人员LekeUserId列表
yearMonth: curMonth ? curMonth.format('YYYY-MM') : '', //年月 ,
}).then(json => {
let jsonData = json.data;
this.getColumns(jsonData.dataList[0] && jsonData.dataList[0].tableHead);
...
});
// 第二步:将表头和table数据对应
getColumns = (tableHead: TsearchByMonthInfoHead[]) => {
const columns: ColumnProps<Array<any>>[] = tableHead && tableHead.map((item, index) => {
return {
title: item.headName,
align:'center',
fixed: item.isFixed ? 'left' : false,
width: 80,
filterDropdown: item.tipMsg ? true : false,
filterIcon: (
<Tooltip title="默认" onVisibleChange={() => this.onVisibleChange(item.tipMsg)} placement="top">
<Icon type="question-circle-o" theme="outlined" />
</Tooltip>
),
render: (_: any, record: any) => {
const value = record[index].showValue;
return (
<div
title={value ? value : ''}
className={`${prefixCls}-width-limit`}
>
{value}
</div>
);
},
};
});
this.setState({
columns,
});
};