antd -Table

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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容