1、表头
constcolumns=[
{title:'ID',dataIndex:'id',key:'id'},
{title:'名称',dataIndex:'name',key:'name'},
];
title:表头名字,dataIndex:对应数据库表的字段名 ,key:对应数据库表的字段名,如果设置了dataIndex,可不设置此项
2、表格中每列都有编辑和删除按钮
{title:'操作',dataIndex:'_id',key:'_id',render:(text,record,index)=>(
<p><a>编辑</a><a>删除</a></p>
)}
3、可扩展的表格
在table中加入expandedRowRender={this.expandedRowRender.bind(this)}
然后在expandedRowRender这个函数中加入你要展开显示的数据
4、可勾选以及全选操作的表格
在table中加入rowSelection={this.rowSelection.bind},在此方法中获取到勾选的数据的index,以及勾选的数据,
场景:在勾选数据完成之后,table的title上出现删除按钮
做法:当勾选数组长度大于0时,合并column的单元格,第一个title设置为删除按钮
5、表格中带有输入框的
{title:'枚举值',key:'value',render:(text,record,index)=> (
<Input defaultValue = "" />
}
就是在columns里面加入Input框
6、表格中添加一行新数据
思路:向表格原始数据中加入一行空数据,然后表格就会增加一行了,在表格中插入输入框,就可以直接输入数据,或者不想所有的表格都是输入框的话,可以加判断,如果数据为空就以输入框的形式展现,如果有数据就直接将数据展现在<p>标签中
7、加载样式:
在table中加入loading={}
设置默认加载为true,然后当请求中拿到数据之后,设置为false。