antd 表格树如何展开_React Ant Design树形表格的复杂增删改

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

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

树形表格的显示

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

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

​

colums标题: 简易版标题，随着功能的增长，咱们将增长colums的复杂度。web

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": "数