sakuraxiaoyu
sakuraxiaoyu

逐行解析Antd Design可编辑单元格

解析Antd Design可编辑单元格

背景：

在项目中肯定不免需要类似这样的表格，在单元格里面进行编辑。类似这样：
逐行解析Antd Design可编辑单元格_第1张图片
逐行解析Antd Design可编辑单元格_第2张图片

逻辑：

这是一个可编辑表格，那么就需要确定的是每次点击编辑定位到需要被编辑的那一行。就比如说我点击了第一行，那么就只能是第一行可以被编辑，其余几行都处于禁用状态。

关键代码：

我用的是antd design组件库，详情可以去官网：https://ant.design/components/table-cn/#components-table-demo-edit-cell

columns是表格列的配置。有些关键参数我在这边做些说明：

align 设置列的对齐方式
dataIndex 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
editable 是否可编辑
render 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并
title 列头显示文字（函数用法 3.10.0 后支持）
width 列宽度

editingKey就相当于是一个标识，当editingKey为''时，就无法编辑，当其有值时就可以编辑。

isEditing函数就是把需要编辑的那一行值的key赋``editingKey值并且返回。在columns`中就根据这个返回的值来判断是否需要编辑。

const [editingKey, setEditingKey] = useState('');   
const isEditing =(record) => {
        return record.key === editingKey
    };

const columns = [
        {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            width: '140px',
            render: (_, record) => {
                const editable = isEditing(record);
                return editable ? (
                    
                         {
                                save(record.key)
                            }}
                        >
                            保存
                        
                         {
                                cancel();
                            }}
                        >
                            取消
                        
                    
                )
                : (
                     {
                        edit(record)
                    }}
                    >编辑
                )
            }
        },
        {
            title: '供应商名称',
            dataIndex: 'accountName',
            width: '150px',
            editable: true,
        },
        {
            title: '供应商代码',
            dataIndex: 'supplierCode',
            width: '150px',
            editable: true,
        },
        {
            title: '开户行',
            dataIndex: 'bankName',
            width: '250px',
            editable: true,
        },
        {
            title: '账号',
            dataIndex: 'accountNumber',
            width: '250px',
            editable: true,
        },
    ];

点击编辑时触发该函数，把单元格里面的数据赋值到编辑框里面。说的直白一点就是当点击编辑框的时候，会出现新的输入组件，但是这个Input组件没有值，如果我们只是修改某个字的话又要重新输入一遍，所以需要把原来单元格的值赋值给输入框。

//编辑    
const edit =(record) => {
    form.setFieldsValue({
        ...record
    });
    setEditingKey(record.key)
};

取消的思想就是把editingKey赋值为'',随后recoed.key值也为''，就取消了编辑状态了。

//取消
const cancel =() => {
    setEditingKey('');
};

我在这边把编辑的组件单独封装了起来，因为可能不止一个页面需要调用该组件。

先引入该组件,具体的路径因人而异。

import EditableTable from './editableTable';

逐行解析Antd Design可编辑单元格_第3张图片

具体使用如上图所示，源码如下：

有几个属性有必要说明一下，columns就是上文定义的表格列，scroll定义的是表格滚动区域的宽和高，data就是表格里面的数据了，这是从后端拿到的，settableselectedvalue是表格多选时选中的数据，loading是显示页面是否加载中的一个小动画。

现在来看被封装的EditableTable里面的代码：相关的注释已经写在了代码块里

import React, { useState } from 'react';
import { Table, Input, InputNumber, Select, Form } from 'antd';

// 这里是编辑
function EditableTable(props) {
  const { Option } = Select;
  const { TextArea } = Input;
  const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    requiring,
    selectOptions,
    children,
    ...restProps
  }) => {
    return (
      //  是table data cell 是用于定义表格中的单元格，必须嵌套在标签中
      
        {/* 编辑栏中先是判断是否编辑，如果editing等于某个值，即为真，如果为真，就执行里面的内容。如果为假，就执行children，继承子节点上的内容
                在Form里面又有一个是selectOptions的三目运算法， */}
        {editing ? (
          
            {selectOptions ? selectOptions :