From 7d26ed0e19bf952e7c037b21bfd687759b46e851 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 25 六月 2024 19:21:33 +0800
Subject: [PATCH] 菜单更新
---
src/views/demo/page/form/high/PersonTable.vue | 167 +++++++++++++++++++++++++------------------------------
1 files changed, 77 insertions(+), 90 deletions(-)
diff --git a/src/views/demo/page/form/high/PersonTable.vue b/src/views/demo/page/form/high/PersonTable.vue
index 25fef80..aa630fd 100644
--- a/src/views/demo/page/form/high/PersonTable.vue
+++ b/src/views/demo/page/form/high/PersonTable.vue
@@ -3,15 +3,14 @@
<BasicTable @register="registerTable" @edit-change="handleEditChange">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
- <TableAction :actions="createActions(record, column)" />
+ <TableAction :actions="createActions(record)" />
</template>
</template>
</BasicTable>
<a-button block class="mt-5" type="dashed" @click="handleAdd"> 鏂板鎴愬憳 </a-button>
</div>
</template>
-<script lang="ts">
- import { defineComponent } from 'vue';
+<script lang="ts" setup>
import {
BasicTable,
useTable,
@@ -19,7 +18,7 @@
BasicColumn,
ActionItem,
EditRecordRow,
- } from '/@/components/Table';
+ } from '@/components/Table';
const columns: BasicColumn[] = [
{
@@ -56,92 +55,80 @@
dept: 'New York No. 3Lake Park',
},
];
- export default defineComponent({
- components: { BasicTable, TableAction },
- setup() {
- const [registerTable, { getDataSource }] = useTable({
- columns: columns,
- showIndexColumn: false,
- dataSource: data,
- actionColumn: {
- width: 160,
- title: '鎿嶄綔',
- dataIndex: 'action',
- // slots: { customRender: 'action' },
- },
- scroll: { y: '100%' },
- pagination: false,
- });
-
- function handleEdit(record: EditRecordRow) {
- record.onEdit?.(true);
- }
-
- function handleCancel(record: EditRecordRow) {
- record.onEdit?.(false);
- if (record.isNew) {
- const data = getDataSource();
- const index = data.findIndex((item) => item.key === record.key);
- data.splice(index, 1);
- }
- }
-
- function handleSave(record: EditRecordRow) {
- record.onEdit?.(false, true);
- }
-
- function handleEditChange(data: Recordable) {
- console.log(data);
- }
-
- function handleAdd() {
- const data = getDataSource();
- const addRow: EditRecordRow = {
- name: '',
- no: '',
- dept: '',
- editable: true,
- isNew: true,
- key: `${Date.now()}`,
- };
- data.push(addRow);
- }
-
- function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
- if (!record.editable) {
- return [
- {
- label: '缂栬緫',
- onClick: handleEdit.bind(null, record),
- },
- {
- label: '鍒犻櫎',
- },
- ];
- }
- return [
- {
- label: '淇濆瓨',
- onClick: handleSave.bind(null, record, column),
- },
- {
- label: '鍙栨秷',
- popConfirm: {
- title: '鏄惁鍙栨秷缂栬緫',
- confirm: handleCancel.bind(null, record, column),
- },
- },
- ];
- }
-
- return {
- registerTable,
- handleEdit,
- createActions,
- handleAdd,
- getDataSource,
- handleEditChange,
- };
+ const [registerTable, { getDataSource }] = useTable({
+ columns: columns,
+ showIndexColumn: false,
+ dataSource: data,
+ actionColumn: {
+ width: 160,
+ title: '鎿嶄綔',
+ dataIndex: 'action',
+ // slots: { customRender: 'action' },
},
+ scroll: { y: '100%' },
+ pagination: false,
});
+ // 鏆撮湶getDataSource 渚涚埗缁勪欢浣跨敤
+ defineExpose({ getDataSource });
+
+ function handleEdit(record: EditRecordRow) {
+ record.onEdit?.(true);
+ }
+
+ function handleCancel(record: EditRecordRow) {
+ record.onEdit?.(false);
+ if (record.isNew) {
+ const data = getDataSource();
+ const index = data.findIndex((item) => item.key === record.key);
+ data.splice(index, 1);
+ }
+ }
+
+ function handleSave(record: EditRecordRow) {
+ record.onEdit?.(false, true);
+ }
+
+ function handleEditChange(data: Recordable) {
+ console.log(data);
+ }
+
+ function handleAdd() {
+ const data = getDataSource();
+ const addRow: EditRecordRow = {
+ name: '',
+ no: '',
+ dept: '',
+ editable: true,
+ isNew: true,
+ key: `${Date.now()}`,
+ };
+ data.push(addRow);
+ }
+
+ function createActions(record: EditRecordRow): ActionItem[] {
+ if (!record.editable) {
+ return [
+ {
+ label: '缂栬緫',
+ onClick: handleEdit.bind(null, record),
+ },
+ {
+ label: '鍒犻櫎',
+ },
+ ];
+ }
+ return [
+ {
+ label: '淇濆瓨',
+ onClick: handleSave.bind(null, record),
+ },
+ {
+ label: '鍙栨秷',
+ popConfirm: {
+ title: '鏄惁鍙栨秷缂栬緫',
+ confirm: handleCancel.bind(null, record),
+ },
+ },
+ ];
+ }
</script>
--
Gitblit v1.9.3