ant design 中實現表格頭部可刪除和添加

我是用antd pro做一個項目。有一個小需求是表格頭部欄可操作。具體是表頭的每一項都帶一個“x”按鈕，當不想展示這一欄的時候，直接點“x”,這一欄就不展示了。不展示的頭部標簽放一邊，也可以隨時加入到表格中。

先看圖：

1.表頭信息有個“x”,當點擊了某一項，該項在表格中消失，並且該標簽會在可添加表頭上展示。

 

2.此時我“x”掉了序號，用戶名兩項，得到下面的效果。

 

3.此時我點擊了 “+用戶名” 標簽，表格中再次展示了用戶名，同時，可添加表頭欄少了 “+用戶名” 標簽。

 

這項功能在ant design 上的表格組件是沒有的，所以我自己在現有組件的基礎上實現的。如果你想看懂下面的代碼，你需要了解ant design 的表格組件的使用。

import React from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import {
  Table,
  Card,
  Form,
  Input,
  Button,
  Tag,
  Select,
  Row,
  Col,
  DatePicker,
  message,
  Tooltip,
  Icon,
} from 'antd';
import { ABNORMAL_AUDIT_STATUS, ABNORMAL_AUDIT_STATUS_COLOR } from '@/constants';
import moment from 'moment';

const { Option } = Select;
const { RangePicker } = DatePicker;

const FormItem = Form.Item;
const risk = ['無', '低', '中', '高', '嚴重'];
@connect(({ riskEvent, abnormalList, loading }) => ({
  riskEvent,
  abnormalList,
  loading: loading.models.abnormalList,
}))
@Form.create()
class AbnormalList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedData: [],
      newCol: [],
      colKey: {
        id: 0,
        username: 1,
        riskLevel: 2,
        riskScene: 3,
        department: 4,
        createTime: 5,
        status: 6,
        baseInfo: 7,
        operatePlatform: 8,
      },
      columns: [
        {
          title: (
            <div>
              <a onClick={() => this.columsControl('id')}>
                <Icon style={{ fontSize: '6px' }} type="close" />
              </a>{' '}
              序號
            </div>
          ),
          dataIndex: 'id',
          key: '序號',
        },
        {
          title: (
            <div>
              <a onClick={() => this.columsControl('username')}>
                <Icon style={{ fontSize: '6px' }} type="close" />
              </a>{' '}
              用戶名
            </div>
          ),
          dataIndex: 'username',
          key: '用戶名',
        },
        {
          title: (
            <div>
              <a onClick={() => this.columsControl('riskLevel')}>
                <Icon style={{ fontSize: '6px' }} type="close" />
              </a>{' '}
              風險等級
            </div>
          ),
          dataIndex: 'riskLevel',
          key: '風險等級',
          sorter: true,
          sortDirections: ['descend'],
          render: text => risk[text],
        },
        {
          title: (
            <div>
              <a onClick={() => this.columsControl('riskScene')}>
                <Icon style={{ fontSize: '6px' }} type="close" />
              </a>{' '}
              風險場景
            </div>
          ),
          dataIndex: 'riskScene',
          key: '風險場景',
          render: riskScene => {
            const isLong = riskScene.length > 10;
            return (
              <span>
                {isLong ? (
                  <Tooltip title={riskScene}>`${riskScene.slice(0, 10)}...`</Tooltip>
                ) : (
                  <span>{riskScene}</span>
                )}
              </span>
            );
          },
        },
        {
          title: (
            <div>
              <a onClick={() => this.columsControl('department')}>
                <Icon style={{ fontSize: '6px' }} type="close" />
              </a>{' '}
              部門
            </div>
          ),
          dataIndex: 'department',
          key: '部門',
          render: dep => {
            const isLong = dep.length > 10;
            return (
              <span>
                {isLong ? (
                  <Tooltip title={dep}>`${dep.slice(0, 10)}...`</Tooltip>
                ) : (
                  <span>{dep}</span>
                )}
              </span>
            );
          },
        },
        {
          title: (
            <div>
              <a onClick={() => this.columsControl('createTime')}>
                <Icon style={{ fontSize: '6px' }} type="close" />
              </a>{' '}
              告警時間
            </div>
          ),
          dataIndex: 'createTime',
          key: '告警時間',
        },
        {
          title: (
            <div>
              <a onClick={() => this.columsControl('status')}>
                <Icon style={{ fontSize: '6px' }} type="close" />
              </a>{' '}
              狀態
            </div>
          ),
          dataIndex: 'status',
          key: '狀態',
          render: status => (
            <Tag color={ABNORMAL_AUDIT_STATUS_COLOR[status]}>{ABNORMAL_AUDIT_STATUS[status]}</Tag>
          ),
        },
        {
          title: (
            <div>
              <a onClick={() => this.columsControl('baseInfo')}>
                <Icon style={{ fontSize: '6px' }} type="close" />
              </a>
              文件名
            </div>
          ),
          dataIndex: 'baseInfo',
          key: '文件名',
          render: text => {
            const jsonData = JSON.parse(text);
            const name = jsonData.filename;
            return name ? <span>{name}</span> : '';
          },
        },
        {
          title: (
            <div>
              <a onClick={() => this.columsControl('operatePlatform')}>
                <Icon style={{ fontSize: '6px' }} type="close" />
              </a>
              操作平台
            </div>
          ),
          dataIndex: 'operatePlatform',
          key: '操作平台',
        },
        {
          title: '操作',
          fixed: 'right',
          width: 80,
          render: (_, record) => (
            <div>
              {record.status === 0 ? (
                <RoamMoudle onOk={this.pushRoma}>
                  <a
                    onClick={() => {
                      this.roamId(record.id);
                    }}
                  >
                    流轉
                  </a>
                </RoamMoudle>
              ) : (
                <span>流轉</span>
              )}
            </div>
          ),
        },
      ],
    };
  }

  componentWillMount() {
    const { dispatch } = this.props;
   dispatch({
        type: 'abnormalList/fetchList',
        payload: {
          page: 1,
          pageSize: 10,
          filter: [],
        },
      });
  }

  columsControl = str => {
    const { colKey, columns, newCol } = this.state;
    const id = colKey[str];
    newCol.push(columns[id]);
    delete columns[id];  // 此處用delete方便后續添加某項表頭的時候能回到最開始的位置
    this.setState({ columns, newCol });
  };

  addCol = (one, str, i) => {
    const { colKey, columns, newCol } = this.state;
    const id = colKey[str];
    columns.splice(id, 1, one);  // 替換
    newCol.splice(i, 1); // 刪除
    this.setState({ columns, newCol });
  };

  handleTableChange = (pagination, filters, sorter) => {
    const { current, pageSize } = pagination;
    const {
      dispatch,
      abnormalList: { filter },
    } = this.props;
    dispatch({
      type: 'abnormalList/fetchList',
      payload: {
        page: current,
        pageSize,
        filter,
        sorter,
      },
    });
  };

 
  render() {
    const { abnormalList, loading } = this.props;
    const { selectedData, columns, newCol } = this.state;

    const { data, page, total } = abnormalList;

    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        this.setState({ selectedData: selectedRowKeys });
      },
      getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
    };

    return (
      <GridContent>
        <Card bordered={false}>
          <div
            style={{
              border: '1px solid #CAE7FD',
              padding: '5px 10px',
              borderRadius: '4px',
              background: '#E9F7FE',
            }}
          >
         可添加表頭：
            {newCol.map((item, index) => (
              <Tag key={item.dataIndex}>
                <a
                  onClick={() => {
                    this.addCol(item, item.dataIndex, index);
                  }}
                >
                  +{item.key}
                </a>
              </Tag>
            ))}
          </div>
          <br />
          <Table
            columns={columns}
            dataSource={data}
            loading={loading}
            rowSelection={rowSelection}
             scroll={{ x: 1300 }}
            rowKey="id"
            pagination={{
              showSizeChanger: true,
              current: page,
              total,
              pageSizeOptions: ['10', '20', '50', '100'],
            }}
            onChange={this.handleTableChange}
          />
        </Card>
      </GridContent>
    );
  }
}

export default AbnormalList;

　　

主要是在columns 中的title中添加點擊事件。columsControl，addCol兩個函數是實現的關鍵。

 

轉載請說明來源，謝謝