cjd-parkball/src/components/table/custom-column.js

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

import React, { Component } from 'react'
import store from 'store2'
import { customStoreKey } from '../utils'
import { Checkbox, Row, Col, Popover, Icon } from '../..'

export default class extends Component {
  handleCustomVisibleChange = (visible) => {
    if (!visible) {
      const key = customStoreKey({ ...this.props, compKey: this.props.tableKey })
      store(key, this.props.columnConfig)
    }
  }

  render () {
    const {
      columnConfig, columns, col, handleCustomColumn,
    } = this.props

    const showColumns = []
    columnConfig.forEach((column) => {
      if (column.show !== false) {
        showColumns.push(column.dataIndex || column.key)
      }
    })

    return (
      <React.Fragment>
        <span key="title">{col.title}</span>
        <Popover
          placement="bottomLeft"
          trigger="click"
          overlayClassName="pk-table-custom"
          onVisibleChange={this.handleCustomVisibleChange}
          content={<Checkbox.Group
            className="pk-table-custom-group"
            onChange={handleCustomColumn}
            value={showColumns}
          >
            <Row>
              {columns.map((column) => {
                const columnKey = column.dataIndex || column.key
                return (
                  <Col
                    className={showColumns.indexOf(columnKey) > -1 ? 'pk-table-custom-item-active' : 'pk-table-custom-item'}
                    key={columnKey}
                    style={{ padding: '7px 15px' }}
                  >
                    <Checkbox value={columnKey}>{column.title}</Checkbox>
                  </Col>
                )
              })}
            </Row>
          </Checkbox.Group>
          }
        >
          <Icon
            key="custom"
            type="double-right"
            className="pk-table-column-icon"
          />
        </Popover>
      </React.Fragment>
    )
  }
}