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%;
}

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

更改DetailsList的行高

1 个答案: