《PC端UI框架》Ant Design V4 中的表格

在 React 中，Table 更新了 dataSource，但是并未重新渲染。
可能原因：下面的写法，引用没有改变，只是改变了引用指向的内存数据，React 认为虚拟 DOM 并没有改变，因此不会重新渲染页面。

let dataSource = this.state.dataSource;
dataSource.push({
	...
})
this.setState({dataSource})

解决方法：let dataSource = [...this.state.dataSource]

表格分页：

// 页码或 pageSize 改变的回调
handleChangePage = (page, pageSize) => {}

// 分页器配置
const pagination = {
  current: pageNumber,
  total: total_count,
  onChange: this.handleChangePage,
  // 是否可以快速跳转至某页
  showQuickJumper: true,
  // 是否展示 pageSize 切换器
  showSizeChanger： true,
}
<Table pagination={pagination}/>

表格多选：

this.state = {
	selectedRowKeys: [], // 多选选中行的 key 数组
}

// 多选表格
handleSelectRowKeys = (selectedRowKeys) => {
    this.setState({selectedRowKeys})
}

// 多选配置
const rowSelection = {
    selectedRowKeys,
    onChange: this.handleSelectRowKeys,
}
<Table rowSelection={rowSelection} rowKey='id' />

表格筛选：

// 分页、排序、筛选变化时触发
handleChangeTable = (pagination, filters, sorter) => {
}
  
// 列配置
const column = [
	{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        // 筛选配置
        filters: [
          {text: '待付款', value: 'initial'},
          {text: '进行中', value: 'processing'},
          {text: '待退款', value: 'refund_pending'},
          {text: '已结束', value: 'finished'},
        ],
     },
]
<Table
    columns={columns}
    dataSource={dataSource}
    onChange={this.handleChangeTable} />

表格排序：

// 分页、排序、筛选变化时触发
handleChangeTable = (pagination, filters, sorter) => {
}

// 列配置
const column = [
	{
        title: '创建时间',
        dataIndex: 'created_at',
        key: 'created_at',
        // 排序配置
        sorter: true,
      },
]
<Table
    columns={columns}
    dataSource={dataSource}
    onChange={this.handleChangeTable} />

表格可编辑行：

// 编辑表格
handleEdit = (record) => {
    this.formRef.current.setFieldsValue({
      ...record,
    })

    this.setState({
      editingKey: record.id,
    })
}

// 保存对表格的编辑
handleSave = (record) => {
 	const data = this.formRef.current.getFieldsValue()

    this.setState({
      editingKey: '',
    })
}

// 取消对表格的编辑
handleCancel = (id) => {
    this.setState({
      editingKey: '',
    })
    this.formRef.current.resetFields()
}

const {editingKey} = this.state
// 列配置
const solumn = [
	{
        title: '姓名',
        dataIndex: 'name',
        // 行是否可编辑
        editable: true,
      },
       {
        title: '操作',
        dataIndex: 'operation',
        render: (text, record, index) => { 
          const editable = (record.id === editingKey)
          return editable ? (
            <div'>
              <a onClick={() => this.handleSave(record)} >保存</a>
              <a onClick={() => this.handleCancel(record.id)}>取消</a>
            </div>
          ) : (
           <a onClick={() => this.handleEdit(record)} >编辑</a>
          )
        },
      },
]

// 列配置--设置可编辑单元格的属性
const mergedColumns = columns.map((col) => {
      if (!col.editable) {
        return col
      }

      return {
        ...col,
        // 设置单元格属性
        onCell: (record) => ({
          record,
          dataIndex: col.dataIndex,
          title: col.title,
          editing: record.id === editingKey,
        }),
      }
 })

// 重写单元格--设置可编辑的单元格
const EditableCell = ({
      record, 
      dataIndex,
      title,
      editing,
      children,
      ...restProps
    }) => {
      return (
        <td {...restProps}>
          {editing ? (
            <Form.Item
              name={dataIndex}
            >
              <Input />
            </Form.Item>
          ) : (
            children
          )}
        </td>
      )
}

<Form ref={this.formRef}>
	<Table        
	       columns={mergedColumns}
	        dataSource={dataSource}  
	        // 覆盖默认的 table 元素
	        components={{
	              body: {
	                cell: EditableCell,
	              },
	         }}
	  />
</ Form>

分页控件默认显示英文，修改为中文简体：

antd 目前的默认文案是英文，如果需要使用简体中文，antd 提供了一个 React 组件 ConfigProvider 用于全局配置国际化文案。

import zhCN from 'antd/lib/locale/zh_CN';
import { ConfigProvider } from 'antd';

return (
  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>
);