【React+Antd】 可展开Table

在antd基础上进行改造，抛弃之前的靠前面+进行展开的方式，在操作列进行点击展开

 

 

import { Table } from 'antd';
import React,{useState} from 'react';
import 'antd/dist/antd.css';
import './index.css';
const   APP=()=> {
  const [expandedRowKeys,sexpandedRowKeys]=useState ([]),
  const open = (record) => {
    let expandedRowKey = JSON.parse(
      JSON.stringify(expandedRowKeys)
    ); //一定要深拷贝 不然数组更改视图不更新
    let spliceIndex = expandedRowKey.findIndex((item) => record.id === item);
    if (spliceIndex > -1) {
      expandedRowKey.splice(spliceIndex, 1);
    } else {
      expandedRowKey.push(record.id);
    }
      sexpandedRowKeys(expandedRowKey);
      console.log("expandedRowKeys", expandedRowKeys)
  };
  // render() {
    const columns = [
      { title: 'Name', dataIndex: 'name', key: 'name' },
      { title: 'Age', dataIndex: 'age', key: 'age' },
      { title: 'Address', dataIndex: 'address', key: 'address' },
      {
        title: 'Action',
        dataIndex: '',
        key: 'x',
        render: (record) => <a onClick={() => {open(record)}}>展开</a>,
      },
    ];
    const data = [
      {
        id: 1,
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        description:
          'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
      },
      {
        id: 2,
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        description:
          'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
      },
      {
        id: 3,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        description:
          'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
      },
    ];
    return (
      <div>
        <Table
          columns={columns}
          rowKey={(record) => record.id}
          expandable={{
            expandedRowRender: (record) => (
              <p style={{ margin: 0 }}>{record.address}</p>
            ), //展开行渲染内容
            rowExpandable: (record) => (record.address ? true : false), //全部开启展开属性
            expandIconColumnIndex: -1, //隐藏默认的加号
            //expandIconAsCell: false,
          }}
          dataSource={data}
          expandedRowKeys={expandedRowKeys}
        />
      </div>
    );
  // }
}
export default APP