React 可编辑表格

React 可编辑表格

import React from 'react';
import { Table, Input, Button, Popconfirm, Form } from 'antd';
import 'antd/dist/antd.css';

class EditableTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          key: '1',
          province: '北京',
          gridName: '某某调度中心',
          devType: '燃煤机组',
          fullName: '某某电厂',
          fullNameCode: '12345',
          devCapacity: 100,
          coalDefectBlockPower: 20,
          coalHeatingBlockPower: 15,
          coalOtherBlockPower: 10,
          coalNetrackBlockPower: 5,
        },
        // 其他数据行
      ],
      editingKey: '', // 记录正在编辑的行的 key
    };
  }

  // 开始编辑
  edit(key) {
    this.setState({ editingKey: key });
  }

  // 结束编辑
  save(key) {
    const { data } = this.state;
    const index = data.findIndex((item) => key === item.key);
    if (index > -1) {
      delete data[index].editing; // 结束编辑状态
      this.setState({ data, editingKey: '' }); // 保存数据并清空 editingKey
    }
  }

  // 取消编辑
  cancel(key) {
    const { data } = this.state;
    const index = data.findIndex((item) => key === item.key);
    if (index > -1) {
      delete data[index].editing; // 结束编辑状态
      this.setState({ data, editingKey: '' }); // 取消编辑时不保存数据，只清空 editingKey
    }
  }

  // 输入框变化处理
  handleInputChange(e, key, dataIndex) {
    const { data } = this.state;
    const index = data.findIndex((item) => key === item.key);
    if (index > -1) {
      data[index][dataIndex] = e.target.value;
      this.setState({ data });
    }
  }

  // 渲染可编辑单元格
  renderEditableCell(text, record, dataIndex) {
    const { editingKey } = this.state;
    const editable = record.key === editingKey;
    return editable ? (
      <Input
        value={text}
        onChange={(e) => this.handleInputChange(e, record.key, dataIndex)}
        onPressEnter={() => this.save(record.key)}
        onBlur={() => this.save(record.key)}
      />
    ) : (
      text
    );
  }

  render() {
    const { data } = this.state;
    const columns = [
      { title: '地区', dataIndex: 'province', key: 'province', width: 80 },
      { title: '调管范围', dataIndex: 'gridName', key: 'gridName', width: 80 },
      { title: '机组类型', dataIndex: 'devType', key: 'devType', width: 80 },
      { title: '电厂名称', dataIndex: 'fullName', key: 'fullName', width: 80 },
      { title: '机组编号', dataIndex: 'fullNameCode', key: 'fullNameCode', width: 80 },
      { title: '机组容量', dataIndex: 'devCapacity', key: 'devCapacity', width: 80 },
      {
        title: '机组缺陷受阻',
        dataIndex: 'coalDefectBlockPower',
        key: 'coalDefectBlockPower',
        width: 80,
        render: (text, record) => this.renderEditableCell(text, record, 'coalDefectBlockPower'),
      },
      {
        title: '供热供气受阻',
        dataIndex: 'coalHeatingBlockPower',
        key: 'coalHeatingBlockPower',
        width: 80,
        render: (text, record) => this.renderEditableCell(text, record, 'coalHeatingBlockPower'),
      },
      {
        title: '其他受阻',
        dataIndex: 'coalOtherBlockPower',
        key: 'coalOtherBlockPower',
        width: 80,
        render: (text, record) => this.renderEditableCell(text, record, 'coalOtherBlockPower'),
      },
      {
        title: '网架受阻',
        dataIndex: 'coalNetrackBlockPower',
        key: 'coalNetrackBlockPower',
        width: 80,
        render: (text, record) => this.renderEditableCell(text, record, 'coalNetrackBlockPower'),
      },
      { title: '发电能力', dataIndex: 'devCapacity', key: 'devCapacity', width: 80 },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (_, record) => {
          const { editingKey } = this.state;
          const editable = record.key === editingKey;
          return editable ? (
            <span>
              <a onClick={() => this.save(record.key)} style={{ marginRight: 8 }}>
                保存
              </a>
              <Popconfirm title="确定取消吗？" onConfirm={() => this.cancel(record.key)}>
                <a>取消</a>
              </Popconfirm>
            </span>
          ) : (
            <a disabled={editingKey !== ''} onClick={() => this.edit(record.key)}>
              编辑
            </a>
          );
        },
      },
    ];

    return <Table bordered dataSource={data} columns={columns} />;
  }
}

export default EditableTable;