Ant Design:表格如何使用?

简介: Ant Design:表格如何使用?

如何使用?


使用请求将列表数据拿过来之后,将列表的值赋给Table中的 dataSource 属性即可

dataSource 设置的是表格的数据源,为一个数组。例如:

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];
<Table dataSource={dataSource} columns={columns} />;

接下来,为Table添加columns属性进行表格列的配置描述:

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];
<Table dataSource={dataSource} columns={columns} />;

columns属性的值也为数组类型

数据的每一项对应表格每一列的配置,其中title属性设置的是每一列的表头名称,dataIndex属性设置的是当前列中的表格数据源中对应每一项的属性,也就是给dataSource的这个数组。

例如:

const dataSource=[
  {
    name:'名称',
    id:1,
  },
  {
    name:'名称2',
    id:2,
  },
];
const columns=[
  {
    title:'名称',
    dataIndex:'name',
  },
  {
    title:'ID',
    dataIndex:'id',
  },
]
<Table dataSource={dataSource} columns={columns} />;

相关文章
|
索引
Ant Design:表格自定义渲染
Ant Design:表格自定义渲染
229 0
ant design pro表格分页
ant design pro表格分页
112 0
Ant Design表格列拖拽,部分源码 #44
Ant Design表格列拖拽,部分源码 #44
242 0
|
前端开发
前端项目实战165-ant design table rowSelection属性
前端项目实战165-ant design table rowSelection属性
131 0
前端项目实战165-ant design table rowSelection属性
|
前端开发
前端项目实战240-ant design表格编辑行要按照id编辑
前端项目实战240-ant design表格编辑行要按照id编辑
116 0
|
前端开发
前端项目实战234-ant design table总结栏
前端项目实战234-ant design table总结栏
165 0
|
前端开发
前端项目实战199-ant design tab 4.2.3之前用法
前端项目实战199-ant design tab 4.2.3之前用法
81 0
|
前端开发
前端项目实战185-ant design table实现编辑单元格的功能
前端项目实战185-ant design table实现编辑单元格的功能
245 0
|
前端开发
前端项目实战218-ant design table单元格编辑
前端项目实战218-ant design table单元格编辑
144 0

热门文章

最新文章