如题。

2020-10-09 21:39创建
共1个回答
XL
游客xlRpUN

有两种方法可以自定义数据表格的列:

  1. 一种是在<Table>组件中传递columns 数组属性:
    • columns数组可以是一个包括字符串的数组,这样在渲染表格的时候会作为列的属性。
    • columns数组也可以是由多个包含keylabel属性的对象组成, key可以获取表格行对应列的值,label会被渲染成表格头的标题。
  2. 一种是在<Table>组件中定义一个<Thead>组件作为第一个子组件。<Thead>组件需要包含<th>子组件,每个<th>子组件需要带有column属性。<th>组件将作为表头显示。以下是示例:

var Table = Reactable.Table, Thead = Reactable.Thead, Th = Reactable.Th, Tr = Reactable.Tr, Td = Reactable.Td; React.renderComponent( <Table className="table" id="table"> <Thead> <Th column="name"> <strong className="name-header">First Name, Last Name</strong> </Th> <Th column="age"> <em className="age-header">Age, years</em> </Th> </Thead> <Tr> <Td column="name" data="Griffin Smith"> <b>Griffin Smith</b> </Td> <Td column="age">18</Td> </Tr> <Tr> <Td column="name">Lee Salminen</Td> <Td column="age">23</Td> </Tr> <Tr> <Td column="position">Developer</Td> <Td column="age">28</Td> </Tr> </Table>, document.getElementById('table') );

在这个例子中,position列将不会被显示。