fusion Design中表格组件的使用
原创fusion Design中表格组件的使用
原创
挥刀北上
发布于 2021-12-29 16:51:32
发布于 2021-12-29 16:51:32
先看一下最基本的使用方式：
import { Table } from '@alifd/next';
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},
id: 100306660940 + i,
time: 2000 + i
});
}
return result;
};
const render = (value, index, record) => {
return <a href="javascript:;">Remove({record.id})</a>;
};
ReactDOM.render(<Table dataSource={dataSource()}>
<Table.Column title="Id" htmlTitle="Unique Id" dataIndex="id"/>
<Table.Column title="Title" dataIndex="title.name" />
<Table.Column title="Time" dataIndex="time"/>
<Table.Column cell={render}/>
</Table>, mountNode);
使用表格组件，主要依赖Table组件，这个组件中可以导出行组件Column。
1、填充的数据格式为：
const DEFAULTDATA = [{ groupname: 'A组', starttime: '2022-03-04 09:30:00', id: 2 }];2、表头的设置有Column组件来设置，Column有两个主要属性，title和dataIndex，title是表格显示的列标题，dataIndex是根据其值获取数据中的属性值。
2.1、Column的另外一个重要属性是cell，其值为一个函数，这个函数的返回值必须是个组件或字符串，这个函数有三个参数，value、index、record，可以根据使用情况来使用。
3、数据填充有Table来完成，Table有个dataSource属性，其值为要填充的数据。
以上便是最基本的用法。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读