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

內容目錄 隱藏

1 需求

2 做法

2.1 相關文章

需求

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

做法

新增 editableFormRef

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

// ...

const editableFormRef = useRef<EditableFormInstance>()

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

接著就能藉由 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}
  // ...
/>

瀏覽量: 53