0

我需要渲染一个表格，其中每个备用行都有一个跨越所有列的行。类似于下面的html，

<table border=1>
<th> Heading 1 </th>
<th> Heading 2 </th>
<tr>
<td> row 1 column 1 </td>
<td> row 1 column 2 </td>
</tr>
<tr>
<td colspan="2"> row 1 column with colspan</td>
</tr>
<tr>
<td> row 2 column 1 </td>
<td> row 2 column 2 </td>
</tr>
<tr>
<td colspan="2"> row 2 column with colspan</td>
</tr>
</table>

Griddle 文档没有提到任何关于 colspan 的内容，但这里有一个自定义列的示例。

const CustomColumn = ({value}) => <span style={{ color: '#0000AA' }}>{value}</span>;
const CustomHeading = ({title}) => <span style={{ color: '#AA0000' }}>{title}</span>;

<Griddle data={fakeData}>
  <RowDefinition>
    <ColumnDefinition id="name" customComponent={CustomColumn} />
    <ColumnDefinition id="state" customHeadingComponent={CustomHeading} />
    <ColumnDefinition id="company" />
  </RowDefinition>
</Griddle>

虽然我colspan在 Griddle 实现中找到了一个道具，但它有一条评论说它是未使用的。 https://github.com/GriddleGriddle/Griddle/blob/c1ce9939f9a93ad9942a63cfd7efc544056ea829/src/module.d.ts#L77

无论如何要使用 Griddle 来实现它，还是我需要创建自己的表格组件？

4

1 回答 1

0

到目前为止，这不可能直接在 Griddle 中实现，可能是用 CSS 破解可以做到这一点。但我选择创建自己的自定义表格组件。

于 2017-11-30T15:10:39.500 回答