最近因为业务接触了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
}
];


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数据：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": "梅花",

"mark_type": "1",

"version": "1"

},{

"key": 123,

"value2": "阅读",

"text2": "阅读题",

"content": "题目内容",

"answer": "野蛮生长",

"mark_type": "1",

"version": "1"

},{

"key": 124,

"value2": "文言文",

"text2": "文言文",

"content": "题目内容",

"answer": "滕王阁序",

"mark_type": "1",

"version": "1"

}],

}],

}, {

"key": 2,

"text": "题目二",

"children": [ {

"key": 21,

"text1": "英语一",

"value1": "英语",

"children": [{

"key": 211,

"value2": "完型",

"text2": "完形填空",

"content": "题目内容",

"answer": "ABC",

"mark_type": "2",

"version": "1"

},{

"key": 212,

"value2": "一级代码",

"text2": "选择",

"content": "题目内容",

"answer": "D",

"mark_type": "2",

"version": "1"

}],

}],

}];
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": "梅花",

"mark_type": "1",

"version": "1"

},{

"key": 123,

"value2": "阅读",

"text2": "阅读题",

"content": "题目内容",

"answer": "野蛮生长",

"mark_type": "1",

"version": "1"

},{

"key": 124,

"value2": "文言文",

"text2": "文言文",

"content": "题目内容",

"answer": "滕王阁序",

"mark_type": "1",

"version": "1"

}],

}],

}, {

"key": 2,

"text": "题目二",

"children": [ {

"key": 21,

"text1": "英语一",

"value1": "英语",

"children": [{

"key": 211,

"value2": "完型",

"text2": "完形填空",

"content": "题目内容",

"answer": "ABC",

"mark_type": "2",

"version": "1"

},{

"key": 212,

"value2": "一级代码",

"text2": "选择",

"content": "题目内容",

"answer": "D",

"mark_type": "2",

"version": "1"

}],

}],

}];增加子项数据增加子项数据增加子项数据使用操作中的增加按钮进行增加，增加按钮设置为图形，更为形象具体清晰化。
//button样式使用antd自带icon样式

onClick={this.handleAdd.bind(this, record)}
/>
//button样式使用antd自带icon样式

onClick={this.handleAdd.bind(this, record)}
/>注意事项：注意事项：注意事项：1、对于最子项来说没有增加子项选择，需要对不同数据行进行不同处理2、不同数据行新增数据的内容不同，字段也不同3、新增之后需要点击确认或者取消4、加入数据点击确认之后需要添加于当前key下的children中本想使用antd自带的editable属性，但是这个属性不支持二级标题的编辑，所以只有自己写render这个问题，在7102年就提出来了，但是已经8102年了快9102年都没有更新。新增一级类型题目样式新增一级类型题目样式新增二级类型题目样式新增二级类型题目样式这里就部分render代码:
//分级标题
{
title: '类型',
children:
[{

title: '一级',

dataIndex: 'text1',

render: (text, record) => {

if (this.state.isEditing && this.state.editingOneKey === record.key)

return { this.changeEdit(e, record.key, 'text1') }} />

return text

}
},
{

title: '二级',

dataIndex: 'text2',

render: (text, record) => {

if (this.state.isEditing && this.state.editingTwoKey === record.key)

return { this.changeEdit(e, record.key, 'text2') }} />

return text

}
}]
}

//select选择
{
title: '内容',
dataIndex:'content',
render:(text, record) => {

if (text === 0)

text = '内容一';

if (text === 1)

text = '内容二';

if (this.state.isEditing && this.state.editingTwoKey === record.key) {

return {

this.changeEdit(e, record.key, 'flag')

}} getPopupContainer={triggerNode => triggerNode.parentNode}>

有效

无效



}

return text
}
}


//分级标题
{
title: '类型',
children:
[{

title: '一级',

dataIndex: 'text1',

render: (text, record) => {

if (this.state.isEditing && this.state.editingOneKey === record.key)

return { this.changeEdit(e, record.key, 'text1') }} />

return text

}
},
{

title: '二级',

dataIndex: 'text2',

render: (text, record) => {

if (this.state.isEditing && this.state.editingTwoKey === record.key)

return { this.changeEdit(e, record.key, 'text2') }} />

return text

}
}]
}

//select选择
{
title: '内容',
dataIndex:'content',
render:(text, record) => {

if (text === 0)

text = '内容一';

if (text === 1)

text = '内容二';

if (this.state.isEditing && this.state.editingTwoKey === record.key) {

return {

this.changeEdit(e, record.key, 'flag')

}} getPopupContainer={triggerNode => triggerNode.parentNode}>

有效

无效



}

return text
}
}

注意展开注意展开如果对一行未展开的行下新增数据，那么无法看到打开的编辑状态是一个非常糟糕的问题。所以我们需要在新增子项的时候自动展开父项。
//steate初始化
expandedRows: [] //展开行
//render 初始化

bordered

expandedRowKeys={this.state.expandedRows}

onExpandedRowsChange={this.changeExpandedRows.bind(this)}
/>

//自动展开变化，获取当前展开行
changeExpandedRows = (expandedRows) => {

this.setState({

expandedRows

})
};

//增加函数中
let rows = this.state.expandedRows;
rows.push(record.key);
this.setState({
expandedRows: rows
});


//steate初始化
expandedRows: [] //展开行
//render 初始化

bordered

expandedRowKeys={this.state.expandedRows}

onExpandedRowsChange={this.changeExpandedRows.bind(this)}
/>

//自动展开变化，获取当前展开行
changeExpandedRows = (expandedRows) => {

this.setState({

expandedRows

})
};

//增加函数中
let rows = this.state.expandedRows;
rows.push(record.key);
this.setState({
expandedRows: rows
});

删除行数据删除行数据删除在antd中相较比较简单，因为antd的table每行都有key属性，key是唯一且必须的属性，所以只要过滤掉包含目的key的数据即可视为删除。因为这是树形数据，普通的遍历无法进行操作，所以使用深度优先遍历来进行数据处理，也可以使用广度优先，根据数据来变更。
handleDelete = (key) => {

let data = this.state.data;

data = dsFilter(data, key);


this.setState({

data

});


function dsFilter(dealData, dealKey) {

for (let i = 0; i < dealData.length; i++) {

if (dealData[i].children && dealData[i].children.length > 0) {

dealData[i].children = dsFilter(dealData[i].children, dealKey);

}

}

return dealData.filter(item => item.key !== dealKey);

}
};


handleDelete = (key) => {

let data = this.state.data;

data = dsFilter(data, key);


this.setState({

data

});


function dsFilter(dealData, dealKey) {

for (let i = 0; i < dealData.length; i++) {

if (dealData[i].children && dealData[i].children.length > 0) {

dealData[i].children = dsFilter(dealData[i].children, dealKey);

}

}

return dealData.filter(item => item.key !== dealKey);

}
};

修改某些字段修改某些字段修改和新增的colums相同，不过修改需要保存之前的值。需要在input或select中设置defaultValue={text}来保证初始值相同保存保存无论是新增修改还是删除，都需要进行保存。这里使用✓和✗ 来代表确定和取消。同时需要注意，如果在一行的编辑中点击其他行的操作，需要将之前行的操作视为取消。

onClick={this.saveEdit.bind(this, record.key)}
/>

onClick={this.cancelEdit.bind(this, record.key)}
/>