前端-自定义Ant Design 表格(可编辑表格)

选取的的是：表格 Table - Ant Design

其实ant design本身就有增加和删除单列数据的封装好的表格，但是个人觉得那个功能繁多，自己实现封装也便于之后理解和二次使用。

初步效果（舍去切换样式的功能）：

突破的关键点就是在点击表格的每一行都是有对应的rowkey:

以此我们新增加入一行数据和删减选中数据的功能

①将表格利用useState实现响应式：

    const [data,setData] = useState([

        {

            key: '1',

            name: 'John Brown',

            age: 32,

            address: 'New York No. 1 Lake Park',

        },

    ]);

②添加增加和删减按钮：

③新增实现代码：

新增代码

    let [count,setCount]=useState(2)//每一行都有独立的的key

    const adddata=()=>{

        const newrowdata={

            key:count,

            name: 'newname',

            age: 42,

            address: 'newaddress',

        }

        //利用扩展运算符将新增数据拷贝到原数据实现新增

        setData([...data,newrowdata])

        setCount(count+1)

    }

实现新增功能：

④删除选中行实现代码： 

我们需要利用已经定义好的rowSelection收集选中行的key

    let [selecteddatarowkeys,setSelecteddatarowkeys]=useState([])

    const rowSelection = {

        onChange: (selectedRowKeys, selectedRows) => {

            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);

            setSelecteddatarowkeys(selectedRowKeys)

        },

        getCheckboxProps: (record) => ({

            //设置禁用行，我们默认为第一行

            disabled: record.key === '1',

        }),

    };

    console.log('收集的选中行:'+selecteddatarowkeys)

那么就可以实现功能就很方便了：

    const deletedata=()=>{

        //去除data当中包含选中行的rowkeys

        const newdate=data.filter(item=>!selecteddatarowkeys.includes(item.key))

        setData(newdate)

    }

⑤附上全部代码：

import React, { useState } from 'react';
import { Table ,Button} from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
const App = () => {
    //就是相当于每列的索引
    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
        },
    ];
    //每列的数据
    const [data,setData] = useState([
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
        },
    ]);
    let [selecteddatarowkeys,setSelecteddatarowkeys]=useState([])
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            setSelecteddatarowkeys(selectedRowKeys)
        },
        getCheckboxProps: (record) => ({
            //设置禁用行，我们默认为第一行
            disabled: record.key === '1',
        }),
    };
    console.log('收集的选中行:'+selecteddatarowkeys)
    let [count,setCount]=useState(2)
    const adddata=()=>{
        const newrowdata={
            key:count,
            name: 'newname',
            age: 42,
            address: 'newaddress',
        }
        //利用扩展运算符将新增数据拷贝到原数据实现新增
        setData([...data,newrowdata])
        setCount(count+1)
    }
    const deletedata=()=>{
        //去除data当中包含选中行的rowkeys
        const newdate=data.filter(item=>!selecteddatarowkeys.includes(item.key))
        setData(newdate)
    }
    return (
        <div style={{ display: 'flex' ,flexDirection:'column'}}>
            <div className="operatedata" style={{margin:'20px'}}>
            <Button type="primary" icon={<PlusOutlined />} onClick={adddata} style={{margin:'0 10px'}}>
                新增
            </Button>
            <Button type="primary" icon={<MinusOutlined />} onClick={deletedata}>
                删减
            </Button>
            </div>
            <Table
                rowSelection={{
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={data}
            />
        </div>
    );
};
export default App;