更改DetailsList的行高

Question

如何更改 DetailsList 行的行高？我可以通过将参数设置为 true 来使行紧凑吗？我可以进一步降低高度，就像表格行一样吗？

我尝试修改 IDetailsRowStyle 单元格中的 maxHeight 。但它仍然给出相同的大小。

Answer 1

男孩，他们并不容易，不是吗？我遇到了同样的问题，经过几个小时的实验终于偶然发现了正确的组合。这将为您提供所有单元格之间完全紧密的间距，以便您可以在每个单元格内执行您想要的任何操作。希望 1.5 年后这对您（或其他任何人）仍然有用！

import * as React from 'react';
import { DetailsList, IDetailsHeaderProps, IDetailsListProps, IRenderFunction, ScrollablePane, Sticky } from '@fluentui/react';

export interface IDataGridProps extends IDetailsListProps
{
    RowHeight?: number
}

export class DataGrid extends React.Component<IDataGridProps>
{
    render()
    {
        return (
            <ScrollablePane>
                <DetailsList
                    cellStyleProps={{
                        cellLeftPadding: 0,
                        cellRightPadding: 0,
                        cellExtraRightPadding: 0,
                    }}
                    useReducedRowRenderer={this.props.useReducedRowRenderer}
                    compact={true}
                    onRenderDetailsHeader={
                        // tslint:disable-next-line:jsx-no-lambda
                        (detailsHeaderProps?: IDetailsHeaderProps, defaultRender?: IRenderFunction<IDetailsHeaderProps>) => (
                            <Sticky>
                                {defaultRender ? defaultRender(detailsHeaderProps) : (<></>)}
                            </Sticky>
                        )}
                    onRenderRow={(props, defaultRender) =>
                    {
                        if (!props)
                            return null;
                        props.styles = {
                            cell: {
                                paddingTop: 0,
                                paddingBottom: 0,
                                minHeight: 0,
                                height: this.props.RowHeight || 32,
                                alignSelf: "center"
                            },
                            root: {
                                height: this.props.RowHeight || 32,
                                minHeight: 0,
                                // Optionally draw your own grid lines here 
                                // because we used compact mode
                                //borderColor: "gray",
                                //borderWidth: "0px 0px 1px 0px",
                                //borderStyle: "solid"
                            },
                            checkCell: {
                                height: this.props.RowHeight || 32,
                                minHeight: 0
                            },
                        };
                        return defaultRender ? defaultRender(props) : (<></>);
                    }}
                    constrainMode={this.props.constrainMode}
                    layoutMode={this.props.layoutMode}
                    items={this.props.items || []}
                    columns={this.props.columns} />
            </ScrollablePane>);
    }
}

请注意，这还会为您提供粘性列标题（我无法理解为什么它不是默认的），但如果您不想，可以删除 和ScrollablePane相关的。

然后，在全局 CSS 中的某个位置，您还需要：

.ms-DetailsRow-check.ms-Check-checkHost {
    height: 100%;
}

否则复选框将无法与行正确对齐。