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": "梅花"</