106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<div class="p-4">
|
||
|
|
<BasicTable @register="registerTable">
|
||
|
|
<template #action="{ record, column }">
|
||
|
|
<TableAction :actions="createActions(record, column)" />
|
||
|
|
</template>
|
||
|
|
</BasicTable>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, ref } from 'vue';
|
||
|
|
import {
|
||
|
|
BasicTable,
|
||
|
|
useTable,
|
||
|
|
TableAction,
|
||
|
|
BasicColumn,
|
||
|
|
ActionItem,
|
||
|
|
renderEditableRow,
|
||
|
|
EditTableHeaderIcon,
|
||
|
|
EditRecordRow,
|
||
|
|
} from '/@/components/Table';
|
||
|
|
|
||
|
|
import { demoListApi } from '/@/api/demo/table';
|
||
|
|
const columns: BasicColumn[] = [
|
||
|
|
{
|
||
|
|
title: 'ID',
|
||
|
|
dataIndex: 'id',
|
||
|
|
customRender: renderEditableRow({ dataIndex: 'id' }),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '姓名',
|
||
|
|
dataIndex: 'name',
|
||
|
|
customRender: renderEditableRow({
|
||
|
|
dataIndex: 'name',
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
export default defineComponent({
|
||
|
|
components: { BasicTable, EditTableHeaderIcon, TableAction },
|
||
|
|
setup() {
|
||
|
|
const currentEditKeyRef = ref('');
|
||
|
|
|
||
|
|
const [registerTable] = useTable({
|
||
|
|
title: '可编辑行示例',
|
||
|
|
api: demoListApi,
|
||
|
|
columns: columns,
|
||
|
|
showIndexColumn: false,
|
||
|
|
actionColumn: {
|
||
|
|
width: 160,
|
||
|
|
title: 'Action',
|
||
|
|
dataIndex: 'action',
|
||
|
|
slots: { customRender: 'action' },
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
function handleEdit(record: EditRecordRow) {
|
||
|
|
currentEditKeyRef.value = record.key;
|
||
|
|
record.editable = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleCancel(record: EditRecordRow) {
|
||
|
|
currentEditKeyRef.value = '';
|
||
|
|
record.editable = false;
|
||
|
|
record.onCancel && record.onCancel();
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleSave(record: EditRecordRow) {
|
||
|
|
currentEditKeyRef.value = '';
|
||
|
|
record.editable = false;
|
||
|
|
record.onSubmit && record.onSubmit();
|
||
|
|
}
|
||
|
|
|
||
|
|
function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
|
||
|
|
if (!record.editable) {
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
label: '编辑',
|
||
|
|
disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
|
||
|
|
onClick: handleEdit.bind(null, record),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
}
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
label: '保存',
|
||
|
|
onClick: handleSave.bind(null, record, column),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '取消',
|
||
|
|
popConfirm: {
|
||
|
|
title: '是否取消编辑',
|
||
|
|
confirm: handleCancel.bind(null, record, column),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
registerTable,
|
||
|
|
handleEdit,
|
||
|
|
createActions,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|