ProComponents EditableProTable 動態修改其他欄位的值/輸入類別

5 個月前

內容目錄 隱藏

1 需求

2 做法

2.1 相關文章

需求

Table 常見需求之一是根據選擇的值相應顯示不同的內容，比如 EditableProTable 官方文檔中有一個例子是題庫編輯，當計分方式選擇「離散型」時，分值就會變成下拉選單，而計分方式選擇「連續型」時，分值就會是輸入框。

做法

首先定義一個 editableFormRef 傳遞給 <EditableProTable />

import {
  EditableFormInstance,
  EditableProTable,
  ...
} from '@ant-design/pro-components'

// ...

const editableFormRef = useRef<EditableFormInstance>()

// ...
<EditableProTable editableFormRef={editableFormRef} ... />

EditableFormInstance 表單操作：

  /**
   * 获取一行数据的
   * @param rowIndex
   * @returns T | undefined
   *
   * @example getRowData(1)  可以传入第几行的数据
   * @example getRowData("id")  也可以传入 rowKey，根据你列的唯一key 来获得。
   */
  getRowData?: (rowIndex: string | number) => T | undefined;
  /**
   * 获取整个 table 的数据
   * @returns T[] | undefined
   */
  getRowsData?: () => T[] | undefined;
  /**
   * 设置一行的数据，会将数据进行简单的 merge
   *
   * {title:"old", decs:"old",id:"old"} -> set {title:"new"} -> {title:"new", decs:"old",id:"old"}
   *
   * @description 只会做最第一层对象的 merge 哦。
   * {title:"old", decs:{name:"old",key:"old"},id:"old"} -> set {decs:{name:"new"}} -> {title:"old", decs:{name:"new"},id:"old"} -> set {decs:{name:"old"}}
   *
   * @param rowIndex
   * @param data
   * @returns void
   *
   * 根据行号设置
   * @example setRowData(1, { title:"new" })  可以传入修改第几行
   *
   * 根据行 id 设置
   * @example setRowData("id", { title:"new" })  也可以传入 rowKey，根据你列的唯一 key 来设置。
   *
   * 清空原有数据
   * @example setRowData(1, { title:undefined })
   *
   */
  setRowData?: (rowIndex: string | number, data: Partial<T>) => void;

接著就能藉由 editableFormRef.current.setRowData(rowIndex, data) 來修改指定索引的值。

而「分值」要是動態的輸入類別，只需將 valueType 轉為箭頭函數在裡面寫判斷式就可達到。

const columns: ProColumns<DataSourceType>[] = [
    // ...
    {
      title: '计分方式',
      dataIndex: 'scoringMethod',
      valueType: 'select',
      request: async () => [
        {
          value: 'discrete',
          label: '离散型',
        },
        {
          value: 'continuous',
          label: '连续型',
        },
      ],
      fieldProps: (_, { rowIndex }) => {
        return {
          onSelect: () => {
            // 修改同一列的分值為空陣列
            editableFormRef.current?.setRowData?.(rowIndex, { fraction: [] });
          },
        };
      },
    },
    {
      title: '分值',
      width: 150,
      dataIndex: 'fraction',
      valueType: (record) => {
        // 离散型 顯示下拉選單, 连续型 顯示數字輸入框
        const scoringMethod = record?.scoringMethod;
        if (scoringMethod === 'discrete') return 'select';
        return 'digit';
      },
      fieldProps: {
        mode: 'multiple',
      },
      request: async () =>
        ['A', 'B', 'D', 'E', 'F'].map((item, index) => ({
          label: item,
          value: index,
        })),
    },
  ];

<EditableProTable<DataSourceType>
  editableFormRef={editableFormRef}
  name="table"
  columns={columns}
  // ...
/>