扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章给大家分享的是有关React Ant Design实现树形表格的复杂增删改，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
树形表格的显示
在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
}
]; 
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网