补充添加功能

补充添加功能（按需导入负面优化

Author: Cksheuen

cksheuen/auto-imports.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}

cksheuen/components.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    DeleteBut: typeof import('./src/components/DeleteBut.vue')['default']
+    Detail: typeof import('./src/components/Detail.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Table: typeof import('./src/components/Table.vue')['default']
+  }
+}

cksheuen/package.json

@@ -24,6 +24,8 @@
     "@vue/tsconfig": "^0.4.0",
     "npm-run-all2": "^6.0.6",
     "typescript": "~5.2.0",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.9",
     "vue-tsc": "^1.8.11"
   }

cksheuen/src/App.vue

@@ -11,9 +11,10 @@ import { RouterLink, RouterView } from 'vue-router';
     padding: 0;
     margin: 0;
 }
+
+html,
+body,
 #app {
     height: 100vh;
-    overflow: hidden;
     background-color: rgb(245, 245, 245);
-}
-</style>
+}</style>

cksheuen/src/components/Detail.vue

@@ -3,7 +3,7 @@
         :before-close="handleClose">
         <el-descriptions class="margin-top" title="Details" :column="3" border>
             <template #extra>
-                <el-button v-if="editState" @click="saveNewVal">Confirm</el-button>
+                <el-button v-if="controlData.editState" @click="saveNewVal">Confirm</el-button>
                 <el-button type="primary" @click="changeEditState">Edit</el-button>
             </template>
             <el-descriptions-item v-for="item in controlData.dataKeyName">
@@ -13,12 +13,12 @@
                     </div>
                 </template>
                 <el-input id="newVal" v-model="controlData.data[controlData.detaiIndex]![item]"
-                    v-if="editState && item != 'images' && item != 'thumbnail'" />
+                    v-if="controlData.editState && item != 'images' && item != 'thumbnail'" />
 
-                <div class="content" v-if="item != 'images' && item != 'thumbnail' && !editState">
+                <div class="content" v-if="item != 'images' && item != 'thumbnail' && !controlData.editState">
                     {{ controlData.data[controlData.detaiIndex]![item] }}
                 </div>
-                <img v-else-if="item != 'thumbnail' && !editState"
+                <img v-else-if="item != 'thumbnail' && !controlData.editState"
                     :src="controlData.data[controlData.detaiIndex]?.images[0]"
                     :alt="controlData.data[controlData.detaiIndex]?.title">
             </el-descriptions-item>
@@ -33,22 +33,19 @@ import { useControlData } from '@/stores/useControlData';
 
 const controlData = useControlData()
 
-let editState = ref<boolean>(false)
-
 const handleClose = () => {
     controlData.close()
+    controlData.checkState(false)
 }
 
 const changeEditState = () => {
-    editState.value = !editState.value
-
+    controlData.checkState(!controlData.editState)
 }
 
 const saveNewVal = () => {
     let domArr = document.querySelectorAll('#newVal')
     for (let i = 0; i < domArr.length; i++)
         controlData.editItem(i, (domArr[i] as HTMLInputElement).value)
-    console.log(controlData);
 
     changeEditState()
 }

cksheuen/src/components/Table.vue

@@ -1,6 +1,10 @@
 <template>
-    <el-table class="main" :data="getArr((currentPage - 1) * 5 + 1, currentPage * 5)" border stripe
-        :default-sort="{ prop: 'date', order: 'descending' }">
+    <div class="but">
+        <el-button type="success" @click="addItem">Add</el-button>
+        <el-button type="danger" @click="deleteItem">Delete</el-button>
+    </div>
+    <el-table class="main" :data="currentData" border stripe :default-sort="{ prop: 'date', order: 'descending' }"
+        @selection-change="handleSelectionChange">
 
         <el-table-column type="selection" width="55" />
         <el-table-column fixed prop="id" label="id" sortable />
@@ -35,6 +39,11 @@ import { ref, computed } from 'vue'
 import { useControlData } from '@/stores/useControlData';
 
 let currentPage = ref(1)
+let currentData = ref(computed(() => {
+    return getArr((currentPage.value - 1) * 5 + 1, currentPage.value * 5)
+}))
+
+let nowSelected: any = [];
 
 const controlData = useControlData()
 controlData.setNewVal(js.products)
@@ -59,6 +68,31 @@ const getArr = (x: number, y: number) => {
 const emitDetail = (index: number) => {
     controlData.open(index)
 
+}
+
+const addItem = () => {
+    controlData.pushNewItem()
+    controlData.open(controlData.data.at(-1).id - 1)
+    controlData.checkState(true)
+}
+
+const handleSelectionChange = (val: any) => {
+    nowSelected = []
+    val.forEach((element: any, index: number) => {
+        nowSelected[index] = element.id
+    });
+}
+const deleteItem = () => {
+    console.log(nowSelected);
+
+    nowSelected.forEach((id: number, index: number) => {
+        console.log(id);
+
+        controlData.idDelItem(id)
+        console.log(controlData.data);
+
+    });
+
 }
 </script>
 
@@ -67,11 +101,17 @@ const emitDetail = (index: number) => {
     display: inline-block;
     width: 90vw;
     margin-top: 75px;
-    left: calc(50vw - 45vw);
+    left: calc(5vw);
 }
 
 .demo-pagination-block {
     margin-top: 10px;
     margin-left: 5vw;
 }
+
+.but {
+    position: absolute;
+    top: 30px;
+    left: calc(5vw);
+}
 </style>

cksheuen/src/main.ts

@@ -1,19 +1,14 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-
 import App from './App.vue';
 import router from './router';
 
-
 const APP = createApp(App);
 
 const pinia = createPinia();
 
 APP.use(router);
-APP.use(ElementPlus);
 APP.use(pinia);
 
-APP.mount('#app');
+APP.mount('#app');

cksheuen/src/stores/useControlData.ts

@@ -18,21 +18,46 @@ interface Data {
 
 export const useControlData = defineStore('useControlData', () => {
     let data = ref<Data[]>([]);
+    let newItem: Data = {
+        id: 0,
+        title: '',
+        description: '',
+        price: 0,
+        discountPercentage: 0,
+        rating: 0,
+        stock: 0,
+        brand: '',
+        category: '',
+        thumbnail: '',
+        images: [''],
+    };
     let dataKeyName: any[] = [];
 
     let detailState = ref<boolean>(false);
     let detaiIndex = ref<number>(0);
 
+    let editState = ref<boolean>(false);
+
     function setNewVal(newData: Data[]): void {
         data.value = newData;
         if (!dataKeyName[0])
             for (let key in newData[0]) {
                 dataKeyName.push(key);
             }
+        newItem.id = data.value.at(-1).id;
+    }
+    function pushNewItem() {
+        newItem.id++;
+        data.value.push(newItem);
     }
     function delItem(index: number): void {
         data?.value?.splice(index, 1);
     }
+    function idDelItem(id: number): void {
+        data.value = data.value.filter((item, index, arr) => {
+            return data.value[index].id != id ? data.value[index] : null;
+        });
+    }
     function editItem(index: number, newVal: string): void {
         data.value[index][dataKeyName[index]] = newVal;
     }
@@ -46,15 +71,23 @@ export const useControlData = defineStore('useControlData', () => {
         detailState.value = false;
     }
 
+    function checkState(state: boolean): void {
+        editState.value = state;
+    }
+
     return {
         data,
         setNewVal,
+        pushNewItem,
         delItem,
+        idDelItem,
         detailState,
         open,
         close,
         detaiIndex,
         dataKeyName,
         editItem,
+        editState,
+        checkState,
     };
 });

cksheuen/tsconfig.node.json

@@ -9,7 +9,7 @@
   ],
   "compilerOptions": {
     "composite": true,
-    "module": "ESNext",
+    "module": "ES2022",
     "moduleResolution": "Bundler",
     "types": ["node"]
   }

cksheuen/vite.config.ts

@@ -1,16 +1,25 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+    plugins: [
+        vue(),
+        AutoImport({
+            resolvers: [ElementPlusResolver()],
+        }),
+        Components({
+            resolvers: [ElementPlusResolver()],
+        }),
+    ],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
+    },
+});