mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 02:19:32 +08:00
feat(table): support custom update on row editing
在表格进入行编辑状态时,在某一列数据发生修改时,允许获取或同步修改其它列的当前编辑数据。 close #646
This commit is contained in:
@@ -282,6 +282,10 @@
|
|||||||
initCbs('validCbs', handleSubmiRule);
|
initCbs('validCbs', handleSubmiRule);
|
||||||
initCbs('cancelCbs', handleCancel);
|
initCbs('cancelCbs', handleCancel);
|
||||||
|
|
||||||
|
if (props.column.dataIndex) {
|
||||||
|
if (!props.record.editValueRefs) props.record.editValueRefs = {};
|
||||||
|
props.record.editValueRefs[props.column.dataIndex] = currentValueRef;
|
||||||
|
}
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
props.record.onCancelEdit = () => {
|
props.record.onCancelEdit = () => {
|
||||||
isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());
|
isArray(props.record?.cancelCbs) && props.record?.cancelCbs.forEach((fn) => fn());
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
import type { BasicColumn } from '/@/components/Table/src/types/table';
|
import type { BasicColumn } from '/@/components/Table/src/types/table';
|
||||||
|
|
||||||
import { h } from 'vue';
|
import { h, Ref } from 'vue';
|
||||||
|
|
||||||
import EditableCell from './EditableCell.vue';
|
import EditableCell from './EditableCell.vue';
|
||||||
|
|
||||||
@@ -50,5 +50,6 @@ export type EditRecordRow<T = Recordable> = Partial<
|
|||||||
submitCbs: Fn[];
|
submitCbs: Fn[];
|
||||||
cancelCbs: Fn[];
|
cancelCbs: Fn[];
|
||||||
validCbs: Fn[];
|
validCbs: Fn[];
|
||||||
|
editValueRefs: Recordable<Ref>;
|
||||||
} & T
|
} & T
|
||||||
>;
|
>;
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="p-4">
|
<div class="p-4">
|
||||||
<BasicTable @register="registerTable">
|
<BasicTable @register="registerTable" @edit-change="onEditChange">
|
||||||
<template #action="{ record, column }">
|
<template #action="{ record, column }">
|
||||||
<TableAction :actions="createActions(record, column)" />
|
<TableAction :actions="createActions(record, column)" />
|
||||||
</template>
|
</template>
|
||||||
@@ -145,6 +145,9 @@
|
|||||||
|
|
||||||
const [registerTable] = useTable({
|
const [registerTable] = useTable({
|
||||||
title: '可编辑行示例',
|
title: '可编辑行示例',
|
||||||
|
titleHelpMessage: [
|
||||||
|
'本例中修改[数字输入框]这一列时,同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
|
||||||
|
],
|
||||||
api: demoListApi,
|
api: demoListApi,
|
||||||
columns: columns,
|
columns: columns,
|
||||||
showIndexColumn: false,
|
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 {
|
return {
|
||||||
registerTable,
|
registerTable,
|
||||||
handleEdit,
|
handleEdit,
|
||||||
createActions,
|
createActions,
|
||||||
|
onEditChange,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
Reference in New Issue
Block a user