提交 fe2bcfc6 编写于 作者: 无木

feat(table): support custom update on row editing

在表格进入行编辑状态时,在某一列数据发生修改时,允许获取或同步修改其它列的当前编辑数据。

close #646
上级 808012b5
......@@ -282,6 +282,10 @@
initCbs('validCbs', handleSubmiRule);
initCbs('cancelCbs', handleCancel);
if (props.column.dataIndex) {
if (!props.record.editValueRefs) props.record.editValueRefs = {};
props.record.editValueRefs[props.column.dataIndex] = currentValueRef;
}
/* eslint-disable */
props.record.onCancelEdit = () => {
isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());
......
import type { BasicColumn } from '/@/components/Table/src/types/table';
import { h } from 'vue';
import { h, Ref } from 'vue';
import EditableCell from './EditableCell.vue';
......@@ -50,5 +50,6 @@ export type EditRecordRow<T = Recordable> = Partial<
submitCbs: Fn[];
cancelCbs: Fn[];
validCbs: Fn[];
editValueRefs: Recordable<Ref>;
} & T
>;
<template>
<div class="p-4">
<BasicTable @register="registerTable">
<BasicTable @register="registerTable" @edit-change="onEditChange">
<template #action="{ record, column }">
<TableAction :actions="createActions(record, column)" />
</template>
......@@ -145,6 +145,9 @@
const [registerTable] = useTable({
title: '可编辑行示例',
titleHelpMessage: [
'本例中修改[数字输入框]这一列时,同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
],
api: demoListApi,
columns: columns,
showIndexColumn: false,
......@@ -198,10 +201,19 @@
];
}
function onEditChange({ column, value, record }) {
// 本例
if (column.dataIndex === 'id') {
record.editValueRefs.name4.value = `${value}`;
}
console.log(column, value, record);
}
return {
registerTable,
handleEdit,
createActions,
onEditChange,
};
},
});
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册