EditableProTable组件(控制数据的位置以及是否可以进行操作)

项目需求:

在新增表格时,需要在表格中固定三条数据(在新建表格数据时一直在最前面展示,并且这三条数据时不可以进行操作的!)

 完整代码:

import React, {useEffect, useRef, useState} from 'react';
import {ActionType, EditableProTable, ProColumns} from "@ant-design/pro-components";
import {Form, message} from "antd";
import {getColumnName} from "@/pages/dataDev/pubCfg/service";

type DataSourceType = {
  id?: any;
  name?: string;
  dataType?: any;
  dataLength?: string;
  isUpload?: any;
  remark?: string;
};

const GatherData: React.FC = () => {

  const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
  const actionRef = useRef<ActionType>();
  const [position, setPosition] = useState<'top' | 'bottom' | 'hidden'>('top');
  const [form] = Form.useForm();
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const columns2: ProColumns<DataSourceType>[] = [
    {
      title: '指标名',
      dataIndex: 'name',
      // width: '20%',
    },
    {
      title: '指标数据类型',
      dataIndex:'dataType',
      valueType: 'select',
      valueEnum: {0:'字符串',1:'时间',2:'数字'},
      // width: '20%',
    },
    {
      title: '指标数据长度',
      dataIndex:'dataLength',
      // width: '20%',
    },
    {
      title: '是否上传附件',
      dataIndex:'isUpload',
      valueType: 'select',
      valueEnum: {0:'是',1:'否'},
    },
    {
      title: '备注',
      dataIndex:'remark',
      // width: '20%',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 140,
      render: (text, record, _, action) => [
        record.id == '1' || record.id == '2' || record.id == '3' ? null : (
          [
            <a
              key="editable"
              onClick={() => {
                action?.startEditable?.(record?.id);
              }}
            >
              编辑
            </a>,
            <a
              key="delete"
              onClick={() => {
                setDataSource(dataSource.filter((item) => item.id !== record.id));
              }}
            >
              删除
            </a>
          ]
        )
      ],
    },
  ];
  // 我先把这三条数据以数据字典的形式添加进去了,然后通过后端接口获取数据字典的数据
  const GainInformation = async () => {
    // 下面三条数据的id是固定的,因为后面的操作是根据id来判断的,并且这三条数据的id要设置的比较小,因为后面的操作是根据id来判断的

    // {"name":"单位名称","dataType":"1","dataLength":"200","isUpload":"2","id":"1"}
    // {"name":"统一信用代码","dataType":"1","dataLength":"200","isUpload":"2","id":"2"}
    // {"name":"信息资源ID","dataType":"1","dataLength":"200","isUpload":"2","id":"3"}
    const res1 = await getColumnName('gather-data');
    if (res1.code === 200) {
      const dataList:any = []
      for (let i = 0; i < res1.data.length; i++) {
        dataList.push(JSON.parse(res1.data[i].label))
      }
      setDataSource(dataList);
    } else {
      message.error('获取采集目录表格数据异常!')
    }
  };

  useEffect(() => {
    GainInformation();
  }, [])

    return (
    <EditableProTable<DataSourceType>
      rowKey="id"
      actionRef={actionRef}
      recordCreatorProps={
        {
          position: position as 'top',
          record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
        }
      }
      columns={columns2}
      // value={dataSource}
      value={
        dataSource.sort((a, b) => a.id - b.id) // 按照id从小到大排序
      }
      onChange={setDataSource}
      editable={{
        form,
        editableKeys,
        onSave: async () => {},
        onChange: setEditableRowKeys,
        actionRender: (row, config, dom) => [dom.save, dom.cancel],
      }}
    />
  )
}

export default GatherData;

核心代码:

/**
  设置这三条数据不可以进行操作
*/

{
      title: '操作',
      valueType: 'option',
      width: 140,
      render: (text, record, _, action) => [
        // 这里我们可以根据上面三条数据的id来进行判断,是否展示操作(前提是上面三条数据的id是固定不变的)
        record.id == '1' || record.id == '2' || record.id == '3' ? null : (
          [
            <a
              key="editable"
              onClick={() => {
                action?.startEditable?.(record?.id);
              }}
            >
              编辑
            </a>,
            <a
              key="delete"
              onClick={() => {
                setDataSource(dataSource.filter((item) => item.id !== record.id));
              }}
            >
              删除
            </a>
          ]
        )
      ],
    },

/**
  让上面三条数据展示在表格的最前面
*/
value={
       // 按照id从小到大排序 ( sort() 方法用于对数组的元素进行排序 a - b 从小到大排序 )
       dataSource.sort((a, b) => a.id - b.id)
      }