ReactAntd(二十六) React-基础表格使用中文

使用表格里面基础信息变成中文

• ConfigProvider

• 变成中文

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

function useBasicTable5() {
  const [pagnationPage] = useState('bottomCenter') //改成BottomCenter
  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'],
    },
  ]

  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 useBasicTable5