需求
Table 常見需求之一是根據選擇的值相應顯示不同的內容,比如 EditableProTable 官方文檔中有一個例子是題庫編輯,當計分方式選擇「離散型」時,分值就會變成下拉選單,而計分方式選擇「連續型」時,分值就會是輸入框。
![ProComponents EditableProTable 動態修改其他欄位的值/輸入類別 14 image 3](https://www.may-notes.com/wp-content/uploads/2024/07/image-3-1024x424.png)
![ProComponents EditableProTable 動態修改其他欄位的值/輸入類別 15 image 4](https://www.may-notes.com/wp-content/uploads/2024/07/image-4-1024x207.png)
做法
首先定義一個 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}
// ...
/>