- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使 antd 的表具有可调整大小的列。效果很好。但是,当我调整列大小时,我无法使任何列小于其内部文本。我尝试设置最小宽度,但它不起作用。至少就我而言。我相信应该有一些属性,我可以将其传递给可调整大小的组件以设置最小宽度。我找到了示例 How antd table can work with react-resizeslibrary 。就在这里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;
最佳答案
指定列的最小宽度:
columns: [
{
title: 'Date',
dataIndex: 'date',
width: 200,
minWidth: 120
},
]
const columns = this.state.columns.map((col, index) => ({
...col,
onHeaderCell: column => ({
minWidth: column.minWidth,
width: column.width,
onResize: this.handleResize(index)
})
}));
minConstraints={[minWidth, 0]}
至<Resizable />
包装器注意:这同样适用于最大宽度,但我们将 maxWidth 属性传递给 maxConstraints={[maxWidth, 0]}
。另外,关于属性名称,我们可以使用任何我们想要的 minWidth 或 maxWidth 名称。它们只是传递我们想要的数字的变量。
codesandbox 示例: https://codesandbox.io/s/minwidthresizable-cp25n
示例基于官方演示:https://ant.design/components/table/#components-table-demo-resizable-column
关于reactjs - 如何使用react-resizing和antd的表指定列的最小宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57822434/
我有一个 View ,不是窗口的大小,也不是窗口本身,当它调整大小时,我想比较调整大小的开始值和结束值。然而,JQ-UI 的 resize ui 对象只包含以前的状态,而不是原始状态,所以它只是按像素
我有一个简单的可调整大小 jQueryUI 元素。 element.resizable({ start: function(event, ui) {...}, resize: func
我有几个嵌套的可调整大小的 div,需要调整大小以适应子大小。一切正常,直到我尝试调整其中一个外部 div 的大小(垂直)然后它卡住了。 这是一个 fiddle . $(function () { $
CNN 模型将大小为 (112x112) 的图像张量作为输入,并给出 (1x512) 大小的张量作为输出。 使用 Opencv 函数 cv2.resize() 或在 pytorch 中使用 Trans
经过大量搜索和研究,我找不到任何答案。 我将非常感谢可以帮助我的人。 在 SWT Java 中, 我希望我的窗口不能调整大小,所以我这样定义它: shell = new Shell(SWT.CLOSE
$(window).bind('resize') 和 $(window).resize() 有什么区别? 我看到bind嵌套在resize之上。它有什么影响?请参阅下面的代码。 我知道.resize(
使用 Vaadin 14.1.19 和 Vaadin“我的入门元素”元素,我尝试创建一个多行 TextArea。乍一看它工作正常,但是当调整 TextArea 大小时,它不会调整行数。这是我的代码:
我有一个使用 Ext.js 的侧面板。在浏览器调整大小之前,侧面板中的其中一个面板很好。浏览器调整大小时,它会切断面板的组件。 如何在浏览器调整大小时调整面板大小? { xtype:
我需要一种可靠的方法来检测 $(window).on('resize') 是否已由用户交互或 jQuery .trigger 调用触发。 我尝试了以下方法,但我似乎没有在函数调用中取回参数: $(wi
我有一个可调整大小的 div,现在我想在调整此框大小/用户完成调整大小时编辑 cookie。 (我有cookie插件) 我该怎么做? PS:我有多个具有不同 id 的 .div。 我的代码不起作用
这些游标类型有什么区别?我在 Chrome/windows 中看到了所有 3 个相同的光标 .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-r
我使用了一个指令,它调用了一个返回一些值的方法,该方法运行良好。但我的问题是它反复调用它,而我想要的是它应该只在调整大小完成时调用该方法。我采取了这种代码形式 https://codepen.io/f
为了检查这种意外行为,我只是将 TextArea 直接放入 PrimaryStage 包含的 Scene 中:在应用程序启动时,TextArea 完全适合窗口(正如预期的那样)。 但是如果我移动窗口的
我在我的项目中使用 jquery-ui-resizable 插件。 默认情况下,当您制作 DOM 对象 jquery-ui-resizable 时,可调整大小的句柄将出现在右下角,我需要在左下角显示可
我正在 MonoTouch 中使用来自 AV Foundation 的 AVPlayer API 开发视频播放器(但 objective-c 中的解决方案也可能不错)。我正在尝试实现全屏模式。 为了显
我只是想让我的响应式 div 示例像这里一样工作 http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-o
我正在制作一个包含一个 .html 文件和一个 .css 文件的页面。 我已将 bootstrap 4 CDN 合并到我的 html 头中。 网格在中等屏幕尺寸下显示正确,但在我的手机上查看时它没有调
所以我有一个最近出现的非常具体的问题(就在我们计划的明天发布日之前),我不确定如何解决它。我用我有限的前端技能构建了我们的 HTML 模板网站,我们对此非常满意。但是,我似乎无法解决这个问题。 问题:
据我了解,有类instance.method(parameters)=class.method(instance,parameters),所以只是记法上的区别。但是 np.resize(ndarray
window.resize() 和 window.on('resize' , function()) 有什么区别在 jquery 中? 最佳答案 来自 jQuery页面.resize(): This
我是一名优秀的程序员,十分优秀!