ReactAntd(二十八) React-高级表格带备注

Antd-高级表格带备注

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

function useHighTable6() {
  const [pagnationPage] = useState('bottomCenter') //改成BottomCenter
  const [selectionType] = useState('checkbox') //checkbox
  //checkbox选择
  //checkbox 选择
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows
      )
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === '张三', // Column configuration not to be checked
      name: record.name,
    }),
  }
  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: '张三的个人信息',
      description: '张三的个人资料补充',
    },
    {
      key: '2',
      name: '李四',
      age: 42,
      address: '李四的个人信息',
      description: '李四的个人资料补充',
    },
    {
      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
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        expandable={{
          expandedRowRender: (record) => (
            <p 0 style="{{" margin: }}>{record.description}< p> ), rowexpandable: (record)=">" record.name !="=" '王五不长' && '侯六名字长', }} columns="{columns}" datasource="{data}" onchange="{onChange}" pagination="{{" position: [pagnationpage], defaultcurrent: 1, defaultpagesize: 2, total: 50, onchange: handleclick, > < configprovider> ) } export default usehightable6< code></p>