在使用Antd的Table时,如果要动态渲染表头和表格内容,需要将列数和数据分别存放在state中,然后在render方法中动态构建列数组和数据展示。下面是示例代码:
import React from 'react';
import {Table} from 'antd';
class DynamicTable extends React.Component{
constructor(props){
super(props);
this.state={
columns:[
{
title:'Name',
dataIndex:'name'
}
],
dataSource:[]
}
}
componentDidMount(){
//通过Ajax获取数据
let columns=[],dataSource=[];
//动态构造columns和dataSource数组
this.setState({columns:columns,dataSource:dataSource});
}
render(){
return (
)
}
}
在上面的代码中,我们使用了Table组件的columns和dataSource属性来动态渲染表格。注意,动态构造columns数组时需要包含一个固定列,否则会出现表头与表格不对齐的情况。
上一篇:Antdesigntable怎样设置默认全选?如果表格中存在分页情况,如何实现全页全选?
下一篇:AntdesignTable组件出现了什么问题,提示TypeError:Object(...)isnotafunction?请问如何解决?