如何使用可调整大小和 antd 表指定列的最小宽度？

Question

我正在尝试使antd的表具有可调整大小的列。效果很好。但是，当我调整列的大小时，我不能使任何列小于其内部文本。我尝试设置最小宽度，但它不起作用。至少就我而言。我相信应该有一些属性，我可以传递给可调整大小的组件以设置最小宽度。 我找到了示例 antd 表如何与可调整大小的库一起工作。就在这里 https://ant.design/components/table/但即使在这个例子中，它的工作方式也与我的情况相同。

import React, { useState } from "react";
import { Button, Icon } from "antd";
import { Resizable } from "react-resizable";
import moment from "moment";
import UniqIdsGenerator from "lib/uniqIdsGenerator";
import SearchData from "containers/SearchData";
import { StyledTable, LikeLink, Header, SearchWrapper } from "./style";
const ResizeableTitle = props => {
const { onResize, width, onClick, ...restProps } = props;
const [allowClick, setAllowClick] = useState(true);
if (!width) {
return <th {...restProps} />;
}
return (
<Resizable
width={width}
height={0}
onResize={onResize}
onMouseDown={e => {
setAllowClick(true);
}}
onResizeStart={e => {
setAllowClick(false);
}}
onClick={e => {
if (allowClick && typeof onClick === "function") {
onClick(e);
}
}}
>
<th {...restProps} />
</Resizable>
);
};
const RowActions = ({ actions, uniqId, onRowAction, record, user }) =>
actions.map(({ label, action }, fieldName) => {
let { status } = record;
return label === "log" && !statuses[status] ? null : (
<LikeLink
key={fieldName}
id={uniqId.getTableRowAction(action)}
onClick={e => {
e.preventDefault();
onRowAction({ record, action });
}}
>
{label}
</LikeLink>
);
});
const HeaderActions = ({ actions, handleClick, uniqId, isAllowed }) =>
actions.map(({ label, action, icon }, fieldName) => {
let button;
label == "Add Upload" && !isAllowed
? (button = (
<Button
key={fieldName}
id={uniqId.getHeaderButton(fieldName)}
onClick={() => handleClick(action)}
disabled={true}
id={"disabledButton"}
>
{icon && <Icon type={icon} />}
{label}
</Button>
))
: (button = (
<Button
key={fieldName}
id={uniqId.getHeaderButton(fieldName)}
onClick={() => handleClick(action)}
>
{icon && <Icon type={icon} />}
{label}
</Button>
));
return button;
});
class DataTable extends React.PureComponent {
state = {
columns: []
};
components = {
header: {
cell: ResizeableTitle
}
};
uniqId = new UniqIdsGenerator(this.props.prefixId);
componentDidMount() {
const { handleClickOnTableRowAction } = this.props;
this.getColumns({
onRowAction: data => handleClickOnTableRowAction(data)
});
}
handleResize = index => (e, { size }) => {
this.setState(({ columns }) => {
const nextColumns = [...columns];
nextColumns[index] = {
...nextColumns[index],
width: size.width
};
// console.log(size.width)
return { columns: nextColumns };
});
};
getColumns = ({ onRowAction }) => {
const { columnsSchema, user } = this.props;
const { uniqId } = this;
let totalColumnsWidth = 250;
const getTotalColumnWidth = column => {
if (column.width) {
totalColumnsWidth += column.width;
}
};
const checkForWidth = column =>
((column.width && totalColumnsWidth) || column.isWidthFixed) &&
column.width;
const prepareToTable = (column, fieldName) => {
return {
title: column.label,
dataIndex: column.fieldName,
orgIndex: (text, record) => column.fieldName,
key: column.key ? column.key : column.fieldName,
width: checkForWidth(column),
defaultSortOrder: column.defaultSortOrder,
sorter: column.sortAs
? (a, b) => sortAs[column.sortAs](a, b, column.fieldName)
: "",
// filters: column.filters && column.filters,
onFilter: (value, record) => record.traceType.match(value),
// onHeaderCell: () => ({ 'id': uniqId.getTableTheadTh(fieldName) }),
render: (text, record) => {
return {
props: {
id: uniqId.getTableTbodyTd(fieldName),
className: "classNameOfCell"
},
children: addChildren(column, record)
};
}
};
};
const addChildren = (column, record) => {
if (column.render) {
return column.render(record);
} else if (column.actions) {
return (
<RowActions
{...column}
user={user}
uniqId={this.uniqId}
onRowAction={onRowAction}
record={record}
/>
);
}
// }
else {
return record[column.fieldName];
}
};
columnsSchema && columnsSchema.forEach(getTotalColumnWidth);
const cols = columnsSchema.map(prepareToTable);
// columnsSchema && columnsSchema.forEach(getTotalColumnWidth);
const columns =
cols &&
cols.map((col, index) => ({
...col,
onHeaderCell: column => ({
width: column.width,
onResize: this.handleResize(index)
})
}));
columns && this.setState({ columns: columns });
};
render() {
const {
data,
staticData,
getRowKey,
onSearch,
loading,
handleClickOnTableRowAction,
handleClickOnHeaderButton,
headerActionsSchema,
isSearchDisabled,
isAllowed
} = this.props;
const { uniqId } = this;
const { columns } = this.state;
return (
<div id={uniqId.getComponentDivWrapper()}>
<Header id={uniqId.getHeaderDiv()}>
{!isSearchDisabled && (
<SearchWrapper>
<SearchData
id={uniqId.getHeaderInput()}
placeholder="Search"
onSearch={e => onSearch(e, staticData)}
/>
</SearchWrapper>
)}
<HeaderActions
actions={headerActionsSchema ? headerActionsSchema : []}
uniqId={uniqId}
handleClick={handleClickOnHeaderButton}
isAllowed={isAllowed}
/>
</Header>
<div id={uniqId.getTableDivWrapper()}>
<StyledTable
loading={loading}
dataSource={data}
bordered
rowKey={getRowKey}
size="small"
pagination={{ pageSize: 10 }}
onRow={(row, fieldName) => ({
id: uniqId.getTableTbodyTr(fieldName)
})}
onHeaderRow={(row, fieldName) => ({
id: uniqId.getTableTheadTr(fieldName)
})}
components={this.components}
columns={columns}
/>
</div>
</div>
);
}
}
export default DataTable;

Answer 1

指定列的最小宽度：

1. 我们需要向列对象添加一个 minWidth 的新属性

columns: [
{
title: 'Date',
dataIndex: 'date',
width: 200,
minWidth: 120
},
]

2. 我们向下传递列 prop：

const columns = this.state.columns.map((col, index) => ({
...col,
onHeaderCell: column => ({
minWidth: column.minWidth,
width: column.width,
onResize: this.handleResize(index)
})
}));

3. 我们将 prop：minConstraints={[minWidth, 0]}添加到包装器<Resizable />

注意：这同样适用于最大宽度，但我们将 maxWidth 道具传递给maxConstraints={[maxWidth, 0]}.另外，关于属性名称，我们可以为minWidth或maxWidth使用任何我们想要的名称。它们只是传递我们想要的数字的变量。

代码沙盒示例：https://codesandbox.io/s/minwidthresizable-cp25n

该示例基于官方演示：https://ant.design/components/table/#components-table-demo-resizable-column