From 2069d53e9be24adec3c8d6717fd7317555bd9a52 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 02 七月 2024 23:02:51 +0800
Subject: [PATCH] 高级表单优化
---
src/views/demo/table/EditCellTable.vue | 126 +++++++++++++++++++----------------------
1 files changed, 58 insertions(+), 68 deletions(-)
diff --git a/src/views/demo/table/EditCellTable.vue b/src/views/demo/table/EditCellTable.vue
index bb4764e..f4e8de1 100644
--- a/src/views/demo/table/EditCellTable.vue
+++ b/src/views/demo/table/EditCellTable.vue
@@ -8,15 +8,16 @@
/>
</div>
</template>
-<script lang="ts">
- import { defineComponent, h } from 'vue';
- import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
- import { optionsListApi } from '/@/api/demo/select';
+<script lang="ts" setup>
+ import { h } from 'vue';
+ import { BasicTable, useTable, BasicColumn } from '@/components/Table';
+ import { optionsListApi } from '@/api/demo/select';
- import { demoListApi } from '/@/api/demo/table';
- import { treeOptionsListApi } from '/@/api/demo/tree';
- import { useMessage } from '/@/hooks/web/useMessage';
+ import { demoListApi } from '@/api/demo/table';
+ import { treeOptionsListApi } from '@/api/demo/tree';
+ import { useMessage } from '@/hooks/web/useMessage';
import { Progress } from 'ant-design-vue';
+
const columns: BasicColumn[] = [
{
title: '杈撳叆妗�',
@@ -209,67 +210,56 @@
width: 200,
},
];
- export default defineComponent({
- components: { BasicTable },
- setup() {
- const [registerTable] = useTable({
- title: '鍙紪杈戝崟鍏冩牸绀轰緥',
- api: demoListApi,
- columns: columns,
- showIndexColumn: false,
- bordered: true,
- });
- const { createMessage } = useMessage();
-
- function handleEditEnd({ record, index, key, value }: Recordable) {
- console.log(record, index, key, value);
- return false;
- }
-
- // 妯℃嫙灏嗘寚瀹氭暟鎹繚瀛�
- function feakSave({ value, key, id }) {
- createMessage.loading({
- content: `姝ｅ湪妯℃嫙淇濆瓨${key}`,
- key: '_save_fake_data',
- duration: 0,
- });
- return new Promise((resolve) => {
- setTimeout(() => {
- if (value === '') {
- createMessage.error({
- content: '淇濆瓨澶辫触锛氫笉鑳戒负绌�',
- key: '_save_fake_data',
- duration: 2,
- });
- resolve(false);
- } else {
- createMessage.success({
- content: `璁板綍${id}鐨�${key}宸蹭繚瀛榒,
- key: '_save_fake_data',
- duration: 2,
- });
- resolve(true);
- }
- }, 2000);
- });
- }
-
- async function beforeEditSubmit({ record, index, key, value }) {
- console.log('鍗曞厓鏍兼暟鎹鍦ㄥ噯澶囨彁浜�', { record, index, key, value });
- return await feakSave({ id: record.id, key, value });
- }
-
- function handleEditCancel() {
- console.log('cancel');
- }
-
- return {
- registerTable,
- handleEditEnd,
- handleEditCancel,
- beforeEditSubmit,
- };
- },
+ const [registerTable] = useTable({
+ title: '鍙紪杈戝崟鍏冩牸绀轰緥',
+ api: demoListApi,
+ columns: columns,
+ showIndexColumn: false,
+ bordered: true,
});
+
+ const { createMessage } = useMessage();
+
+ function handleEditEnd({ record, index, key, value }: Recordable) {
+ console.log(record, index, key, value);
+ return false;
+ }
+
+ // 妯℃嫙灏嗘寚瀹氭暟鎹繚瀛�
+ function feakSave({ value, key, id }) {
+ createMessage.loading({
+ content: `姝ｅ湪妯℃嫙淇濆瓨${key}`,
+ key: '_save_fake_data',
+ duration: 0,
+ });
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ if (value === '') {
+ createMessage.error({
+ content: '淇濆瓨澶辫触锛氫笉鑳戒负绌�',
+ key: '_save_fake_data',
+ duration: 2,
+ });
+ resolve(false);
+ } else {
+ createMessage.success({
+ content: `璁板綍${id}鐨�${key}宸蹭繚瀛榒,
+ key: '_save_fake_data',
+ duration: 2,
+ });
+ resolve(true);
+ }
+ }, 2000);
+ });
+ }
+
+ async function beforeEditSubmit({ record, index, key, value }) {
+ console.log('鍗曞厓鏍兼暟鎹鍦ㄥ噯澶囨彁浜�', { record, index, key, value });
+ return await feakSave({ id: record.id, key, value });
+ }
+
+ function handleEditCancel() {
+ console.log('cancel');
+ }
</script>
--
Gitblit v1.9.3