欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

相关标签: React