---
title: 带筛选缓存功能的表格
order: 2
---
本 Demo 演示带筛选条件缓存、tab 切换的 table 用法
```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Button, Divider } from 'antd';
import { YwTable, YwFilter, YwTab, AddIcon } from '@ywfe/yw-design';
import { EditOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
const { useCache } = YwFilter;
const columns = [
{
title: '标题',
dataIndex: 'title',
component: 'LongText2Ellipsis', // 长文本两行换行
componentProps: {
tooltip: true, // 是否需要tooltip 默认false
},
width: 300,
},
{
title: '摘要',
dataIndex: 'group',
component: 'MultipleCol',
// 数据聚合成新的字段group
formatValues: (_, record) => {
return [
{
label: '人员',
value: record.person,
},
{
label: '事项',
value: record.event,
},
{
label: '时间',
value: record.time,
},
];
},
width: 260,
},
{
title: '发起人',
dataIndex: 'personInfo',
width: 260,
component: 'Person',
componentProps: {
onClick: (record) => {
console.log(record);
},
},
// 字段映射
formatValues: (_, record) => {
return {
avatar: record.personUrl,
name: record.person,
};
},
},
{
title: '发起时间',
dataIndex: 'startTime',
component: 'Time',
width: 260,
},
{
title: '完成时间',
cellType: 'time',
dataIndex: 'endTime',
component: 'Time',
width: 260,
},
{
title: '流程状态',
component: 'Status',
dataIndex: 'statusName',
// Status 组件入参
componentProps: {
dataSource: [
{ value: '处理中', color: 'warning' },
{ value: '审批通过', color: 'success' },
{ value: '审批拒绝', color: 'error' },
{ value: '已撤销', color: 'info' },
],
},
// 字段filter
formatValues: (_, record) => {
const statusMap = {
1: '处理中',
2: '审批通过',
3: '审批拒绝',
};
return statusMap[record.status];
},
width: 260,
},
{
title: '操作',
component: 'Operates',
dataIndex: 'operate',
fixed: 'right',
componentProps: {
value: [
{
visible: (record) => {
return true;
},
render: (record, index, reload) => {
// console.log(record,index,reload)
return 自定义组件;
},
},
{
btnText: '跳转',
btnType: 'link',
target: '_blank',
href: '',
},
{
btnText: '编辑',
btnType: 'link',
rightIcon: ,
},
{
btnText: '通用',
onClick: (e, data, reload) => {
console.log('OK', data);
// 更新页面
setTimeout(reload(), 1000);
},
},
{
btnText: '删除',
component: 'ConfirmModal', // 二次确认弹窗
componentProps: {
title: '提示',
content: (data) => `确认删除 ${data.title} 吗?`,
onOk: (data, reload) => {
console.log('OK', data);
// 更新页面
setTimeout(reload(), 1000);
},
},
type: 'danger',
},
],
},
width: 260,
},
];
const getTableData = async (props) => {
console.log('form参数', props);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
list: [
{
id: 1,
title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
person: '卓洛',
event: '事项',
time: '2022-7-7',
startTime: '2022-4-8 10:43',
endTime: '2022-4-8 10:43',
status: 1,
},
{
id: 2,
title: '川黛时光童装：清旷之乐 改良版汉服女童褙子一片式齐',
person: '卓洛2',
event: '事项111',
time: '2022-7-7',
startTime: '2022-4-8 10:43',
endTime: '2022-4-8 10:43',
status: 2,
},
],
totalNumber: 100,
});
}, 1500);
});
};
const buttons = [
{
type: 'batch',
btnText: '批量选中',
onClick: (keys, data, reload) => {
console.log(keys, data);
setTimeout(reload(), 1000);
},
},
{
type: 'batch',
btnText: '设置状态',
btnType: 'dropdown',
onClick: (key, selectKeys, selectData, reload) => {
console.log(key, selectKeys, selectData, reload);
},
dataSource: [
{
label: '批量开启',
key: '1',
},
{
label: '批量关闭',
key: '2',
},
],
},
{
type: 'batch',
btnText: '批量退回',
visible: false,
},
{
type: 'filter',
children: ,
},
{
type: 'action',
btnText: '主操作',
btnType: 'dropdown',
onClick: (key, reload) => {},
dataSource: [
{
label: '1st menu item',
key: '1',
},
{
label: '2nd menu item',
key: '2',
},
{
label: '3rd menu item',
key: '3',
},
],
},
// {
// type: 'action',
// children: (
// // 自定义
// ),
// },
{
type: 'action',
btnText: '导出',
},
{
type: 'action',
btnText: '新建',
btnType: 'primary',
leftIcon: ,
},
];
// 表格过滤条件
// const filterProps = {
// status: 1,
// };
const tabsConfig = [
{ tab: '全部', key: 'key1', content: '' },
{ tab: '我的直播', key: 'key2', content: '' },
{ tab: '进行中', key: 'key3', content: '' },
{ tab: '我的审核', key: 'key4', content: '', dot: true },
];
const filterItems = [
{
title: '标题',
name: 'input',
component: 'Input',
type: 'string',
props: {
inset: true,
colon: false,
},
componentProps: {
placeholder: '请输入任务标题',
},
},
{
title: '标题',
name: 'input2',
component: 'Input',
type: 'string',
props: {
inset: true,
colon: false,
},
componentProps: {
placeholder: '请输入任务标题',
},
},
{
title: '标题',
name: 'input3',
component: 'Input',
type: 'string',
props: {
inset: true,
colon: false,
},
componentProps: {
placeholder: '请输入任务标题',
},
},
{
title: '类型',
name: 'select',
component: 'Select',
type: 'string',
props: {
inset: true,
colon: false,
},
enum: [
{ value: 1, label: 1 },
{ value: 2, label: 2 },
],
componentProps: {},
},
{
title: '发起人',
name: 'person',
component: 'Select',
type: 'string',
props: {
inset: true,
colon: false,
},
enum: [
{ value: 1, label: 1 },
{ value: 2, label: 2 },
],
componentProps: {
showSearch: true,
},
},
{
type: 'array',
title: '提交审核时间',
name: '[startDate1,endDate1]',
defaultValue: ['2022-07-09', '2022-07-23'],
component: 'DateRangePicker',
props: {
inset: true,
colon: false,
},
componentProps: {
ranges: ['昨天', '今天', '7天', '30天'],
},
},
{
type: 'array',
title: '完成时间',
name: '[startDate2,endDate2]',
component: 'DateRangePicker',
props: {
inset: true,
colon: false,
},
componentProps: {
ranges: ['昨天', '今天', '7天', '30天'],
},
},
];
const App = () => {
const initialValues = { input: '初始值' };
const [tabKey, setTabKey] = useState('key1');
const cache = useCache('testkey', { type: 'sessionStorage', defaultValue: undefined }); // 筛选条件缓存
const [filterProps, setFilterProps] = useState(cache?.message || {});
return (
{
setFilterProps({ ...values, tabKey });
}}
/>
{
setTabKey(key);
setFilterProps({ ...filterProps, tabKey });
}}
defaultActiveKey={tabKey}
dataSource={tabsConfig}
/>
);
};
ReactDOM.render(, mountNode);
```