React Ant Design树形表格的复杂增删改

本文详细介绍了如何使用React和Ant Design实现一个复杂的树形表格,包括显示、增加子项、删除行、修改字段、保存操作和修改顺序。在实现过程中,作者遇到并解决了关于key值、编辑功能、数据处理等方面的问题,强调了Ant Design在树形数据处理上的不足,需要开发者自行补充和完善。
摘要由CSDN通过智能技术生成

React Ant Design树形表格的复杂增删改

​ 最近因为业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑,很多功能antd只写了初步的功能,更为细化的功能只能自己完善。踩过的坑都写在了这里。

树形表格的显示

​ 在antd中对于表格的key值有着严格的控制,每一个row都必须有一个独一无二的key值,可以是数字也可以是字符串。这一点和我曾经使用过得iview有着很大的区别。react使用key来代表每一行是为了避免重新渲染的问题,这个优化也在实际的开发中带来了不少的问题。比如新建行时需要自定义新key。

​ 下面直接上一下代码及代码效果,这是一个三级的树形表格,且其中包含二级标题。

最终效果

colums标题: 简易版标题,随着功能的增加,我们将增加colums的复杂度。

let columns = [
    {
   
        title: '题目',
        dataIndex: 'text'
    },
    {
   
        title: '类型',
        children: [
            {
   
                title: '一级',
                dataIndex: 'text1'
            },
            {
   
                title: '二级',
                dataIndex: 'text2',
            }]
    },
    {
   
        title: '内容',
        dataIndex: 'content'
    },
    {
   
        title: '答案',
        dataIndex: 'answer',
    },
    {
   
        title: '类型',
        dataIndex: 'mark_type',
        className: 'line'
    },
    {
   
        title: '版本',
        dataIndex: 'version',
        className: 'line'
    },
    {
   
        title: '一级内容点',
        dataIndex: 'value1',
        className: 'line'
    },
    {
   
        title: '二级内容点',
        dataIndex: 'value2',
        className: 'line'
    },
    {
   
        title: '操作',
        key: 'action',
        width: 205
    }
];

data数据:

let data =  [{
   
            "key": 1,
            "text": "题目一",
            "children": [{
   
                "key": 11,
                "text1": "数学一",
                "children":[]
            }, {
   
                "key": 12,
                "text1": "语文一",
                "value1": "语文",
                "children": [{
   
                    "key": 121,
                    "value2": "选择",
                    "text2": "选择题",
                    "content": "题目内容",
                    "answer": "A",
                    "mark_type": "1",
                    "version": "1"
                },{
   
                    "key": 122,
                    "value2":"填空",
                    "text2": "填空题",
                    "content": "题目内容",
                    "answer": "梅花"</
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值