React 实现table内单元格可编辑
程序员文章站
2022-06-08 14:58:14
...
Ant Design中给出了实现的办法,但个人觉得有点略微复杂,且在函数组件中似乎还要改写这部分。所以自己实现了一下这个功能,用于函数组件中。
示例:
const ConfigRule = React.forwardRef(({ getFieldDecorator }, ref) => {
const [dataSource, setDataSource] = useState([]);
const columns = [
{
title: '序号',
dataIndex: 'key',
key: 'key',
width: 50,
},
{
title: '数据源',
dataIndex: 'source',
key: 'source',
width: 150,
},
{
title: '源数据表名',
dataIndex: 'table_name_sr',
key: 'table_name_sr',
width: 300,
textWrap: 'word-break',
ellipsis: true, // 处理表头宽度不生效
},
{
title: '目标数据表名',
dataIndex: 'table_name_tr',
key: 'table_name_tr',
width: 300,
textWrap: 'word-break',
ellipsis: true, // 处理表头宽度不生效
render: (text, record) => (
<Item>
{
getFieldDecorator(`targetName.${record.key}`, {// 保证每个元素是唯一
initialValue: text, //之前试过不用getFieldDecorator在外面包着,而是只用input,发现给input设defaultValue,改变table中的数据,input的值不能重新渲染,显示的还是defaultValue;然后又使用value,发现input框里面的值直接无法改变,所以才用了getFieldDecorator。
})(
<Input
onPressEnter={e => saveRow(e, record)}
onBlur={e => saveRow(e, record)}
/>
)
}
</Item>
),
}
];
});
// 保存输入框中的值
function saveRow(e, record) {
const newData = [...dataSource];
const index = dataSource.findIndex(item => record.key === item.key);
newData[index].table_name_tr = e.target.value;
setDataSource(newData);
}
return (
<ProTable
className="mytable"
columns={columns}
dataSource={dataSource}
rowKey="table_name_sr"
scroll={{ x: 1400 }}
pagination={{
pageSizeOptions: ['10', '20', '50', '100'],
showLessItems: true,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
)
}
export default ConfigRule;
参考:https://blog.csdn.net/weixin_44471622/article/details/105140287
上一篇: NPOI设置单元格背景色
下一篇: vue-elementUI-可编辑的表格
推荐阅读
-
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
-
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
-
bootstrap table实现单击单元格可编辑功能
-
优雅的elementUI table单元格可编辑实现方法详解
-
element table表格点击单元格实现编辑
-
React 实现table内单元格可编辑 (hooks)
-
React 实现table内单元格可编辑
-
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
-
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
-
bootstrap table实现单击单元格可编辑功能