ReactAntd(二十七) React-基础表格使用中文里面有操作按钮

带操作按钮的基础中文表格

• 代码

import React, { useState } from 'react'
import { Table, ConfigProvider, Button, Space, message } from 'antd' // 引入ConfigProvider全局化配置
import zhCN from 'antd/es/locale/zh_CN'

function useBasicTable6() {
  const [pagnationPage] = useState('bottomCenter') //改成BottomCenter
  function handleClickcaozuo(value) {
    message.success({
      content: JSON.stringify(value),
      className: 'custom-class',
      style: {
        marginTop: '20vh',
      },
    })
  }
  function handleClickDelete(value) {
    message.success({
      content: JSON.stringify(value),
      className: 'custom-class',
      style: {
        marginTop: '20vh',
      },
    })
  }
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      // specify the condition of filtering result
      // here is that finding the name started with `value`
      onFilter: (value, record) => record.name.indexOf(value) === 0,
      sorter: (a, b) => a.name.length - b.name.length,
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: '年龄',
      dataIndex: 'age',
      defaultSortOrder: 'descend',
      sorter: (a, b) => a.age - b.age,
    },
    {
      title: '地址',
      dataIndex: 'address',
      filterMultiple: false,
      onFilter: (value, record) => record.address.indexOf(value) === 0,
      sorter: (a, b) => a.address.length - b.address.length,
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button
            onClick={() => {
              handleClickcaozuo(record)
            }}
          >
            修改
          </Button>
          <Button
            onClick={() => {
              handleClickDelete(record)
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ]

  const data = [
    {
      key: '1',
      name: '张三',
      age: 32,
      address: '张三的个人信息',
    },
    {
      key: '2',
      name: '李四',
      age: 42,
      address: '李四的个人信息',
    },
    {
      key: '3',
      name: '王五不长',
      age: 32,
      address: '王五的个人信息',
    },
    {
      key: '4',
      name: '侯六名字长',
      age: 32,
      address: '侯六的个人信息',
    },
  ]
  function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra)
  }
  //分页
  const handleClick = (current, pageSize) => {
    console.log(current, pageSize)
    console.log(`当前页是${current}`)
    console.log(`每页条数${pageSize}`)
  }
  return (
    <ConfigProvider locale={zhCN}>
      <Table
        columns={columns}
        dataSource={data}
        onChange={onChange}
        pagination={{
          position: [pagnationPage],
          defaultCurrent: 1,
          defaultPageSize: 2,
          total: 50,
          onChange: handleClick,
        }}
      />
    </ConfigProvider>
  )
}

export default useBasicTable6