之前用table組件的時(shí)候看到antd中的一個(gè)可編輯表格的實(shí)現(xiàn)饲宛，如下圖：

image.png

使用的時(shí)候發(fā)現(xiàn)了一些問題：第一個(gè)是這個(gè)Table組件不支持多個(gè)編輯险掀，官方版的只支持編輯的時(shí)候只編輯一個(gè)，且更不支持一鍵保存田度，第二個(gè)問題是官方代碼是form組件和table組件合一起的妒御，不夠接地氣（怪就怪自己太菜了，有點(diǎn)看不懂....）

image.png

最后出來的效果如下：（請(qǐng)忽略樣式）

可編輯表格.gif

代碼如下：

// 單行可編輯
import React from "react";
import { Table, Input, Button } from "antd";
export default class EditTable extends React.Component {
  state = {
    dataSource: [],
    editArr: [],
  };
  componentDidMount() {
    let arr = [];
    for (let i = 1; i < 11; i++) {
      arr.push({
        id: i,
        name: `第${i}個(gè)名字`,
        age: i,
        address: `住在第${i}號(hào)`,
      });
    }
    this.setState({ dataSource: arr });
  }

  // 渲染出來input,輸入的時(shí)候改變dataSource的數(shù)據(jù)
  renderInput = (text, record, index, field) => {
    const { editArr } = this.state;
    return record.edit ? (
      <Input
        value={
          editArr[index] && editArr[index][field]
            ? editArr[index][field]
            : record[field]
        }
        onChange={(e) => this.inputChange(e, record, index, field)}
        // onPressEnter={(e) => this.handleSave(e, record)}
        // onBlur={(e) => this.handleSave(e, record)}
      />
    ) : (
      text
    );
  };

  // 編輯表格
  edit = (record, id) => {
    const { dataSource } = this.state;
    // 淺拷貝下數(shù)據(jù)
    const newArr = [...dataSource];
    // 找到index的值
    const index = newArr.findIndex((item) => item.id === id);
    // 利用splice方法刪除原數(shù)據(jù)乎莉，新增新數(shù)據(jù)
    newArr.splice(index, 1, { ...record, edit: true });
    // 注意：一開始寫法是const arr = newArr.splice(index, 1, { ...record, ...{ edit: true } });是錯(cuò)的，因?yàn)檫@個(gè)方法返回的是刪除的那一條值
    this.setState({ dataSource: newArr });
  };

  // input改變的時(shí)候
  inputChange = (e, record, index, field) => {
    let { editArr } = this.state;
    editArr[index] = record;
    record[field] = e.target.value;
    this.setState({ editArr });
  };

  // 一鍵保存所有數(shù)據(jù)
  saveAll = () => {
    const { dataSource } = this.state;
    const arr = dataSource.map((item) => {
      return {
        ...item,
        edit: false,
      };
    });
    this.setState({ dataSource: arr }, () => {
      console.log(dataSource, "--dataSource");
    });
  };

  // 單條保存
  handleSave = (record, index) => {
    const { editArr, dataSource } = this.state;
    const newData = [...dataSource];
    // 用splice不改變?cè)瓉淼臄?shù)組順序
    newData.splice(index, 1, {
      ...record,
      ...editArr[index],
      edit: false,
    });
    this.setState({ dataSource: newData });
  };

  render() {
    const columns = [
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        render: (text, record, index) =>
          this.renderInput(text, record, index, "name"),
      },
      {
        title: "年齡",
        dataIndex: "age",
        key: "age",
        render: (text, record, index) =>
          this.renderInput(text, record, index, "age"),
      },
      {
        title: "住址",
        dataIndex: "address",
        key: "address",
        render: (text, record, index) =>
          this.renderInput(text, record, index, "address"),
      },
      {
        title: "操作",
        dataIndex: "edit",
        key: "edit",
        render: (text, record, index) => {
          return !record.edit ? (
            <span
              style={{ color: "black", cursor: "pointer" }}
              onClick={() => this.edit(record, record.id)}
            >
              編輯
            </span>
          ) : (
            <span
              style={{ color: "blue", cursor: "pointer" }}
              onClick={() => this.handleSave(record, index)}
            >
              單條保存
            </span>
          );
        },
      },
    ];

    return (
      <div style={{ width: "90%" }}>
        <Table
          rowKey={(record) => record.id}
          dataSource={this.state.dataSource}
          columns={columns}
        />
        <Button type="primary" onClick={this.saveAll}>
          一鍵保存
        </Button>
      </div>
    );
  }
}