Question

我正在尝试在制表器表中显示material-ui react组件。东西显示正确，除了行的高度。我怀疑在第一次渲染后需要重新渲染，所以制表器知道React组件的高度，但是我不太确定该怎么做。代码看起来像这样：

import { Fab, } from '@material-ui/core';
import { Lock,} from '@material-ui/icons'

const RegisterButton = (props) => {
    const cellData = props.cell._cell.row.data;
    return (
        <Fab
            size='small'
            onClick={handleTownRegisterClick(cellData.id)}
        >
            <Lock fontSize="inherit" />
        </Fab>
    )
}

const columns = [
    { title: 'Id', field: 'id', width: 45 },
    { title: "Register",
        field: "custom",
        align: "center",
        formatter: reactFormatter(<RegisterButton />),
        width: 100,
        headerSort: false
    }
];

稍后在我的表格中使用哪个：

<React15Tabulator
    columns={columns}
    layout={'fitColumns'}
...

有了这个，我的行大约是Fab组件高度的2/3。

我看到格式化程序原型是formatter：function（cell，formatterParams，onRendered）。我应该以某种方式使用onRendered，这是我要强制表格考虑该单元格高度的地方吗？如果是这样，我该怎么做？谢谢。

编辑：

进一步看，制表器似乎忽略了它在其自己的“制表器单元” div中添加的填充（它添加了11px的填充，将我的按钮按了那么多）在第一个渲染器上。

重新排序其他列（强制重新渲染）时，高度变为正确。

在RegisterButton中可以通过props.cell._cell访问一些重绘调用，我只是不知道如何以及何时调用它们...

Answer 1

您曾经解决过这个问题吗？

我具有完全相同的isue，但是具有宽度-因此，按列排序后一切都很好。

我用CSS解决了单元格填充问题：

.tabulator-row .tabulator-cell {
    padding: 0;
}

要垂直居中，您可以使用以下内容编辑基本样式，这适用于我的用例

.tabulator-row {
    flex-direction: row;
    align-items: center;
}
.tabulator-row .tabulator-cell {
    padding: 0;
    height: auto;

    .formatterCell {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

以解决您的问题

在react-tabulator列中正确显示React组件

1 个答案: