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

最新推荐文章于 2024-08-07 09:26:20 发布

穷途陌路

最新推荐文章于 2024-08-07 09:26:20 发布

阅读量1.3w

点赞数 3

分类专栏：前端文章标签： antd React Ant Design

本文链接：https://blog.csdn.net/qmzmzxk/article/details/84556165

版权

本文详细介绍了如何使用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": "梅花"</