perf: 代码优化 views/table

src/views/table/element-plus/index.vue

@@ -7,6 +7,7 @@ import { Search, Refresh, CirclePlus, Delete, Download, RefreshRight } from "@el
 import { usePagination } from "@/hooks/usePagination"
 
 defineOptions({
+  // 命名当前组件
   name: "ElementPlus"
 })
 
@@ -25,29 +26,32 @@ const formRules: FormRules = reactive({
   password: [{ required: true, trigger: "blur", message: "请输入密码" }]
 })
 const handleCreate = () => {
-  formRef.value?.validate((valid: boolean) => {
+  formRef.value?.validate((valid: boolean, fields) => {
     if (valid) {
       if (currentUpdateId.value === undefined) {
-        createTableDataApi({
+        createTableDataApi(formData)
-          username: formData.username,
+          .then(() => {
-          password: formData.password
-        }).then(() => {
             ElMessage.success("新增成功")
-          dialogVisible.value = false
             getTableData()
           })
+          .finally(() => {
+            dialogVisible.value = false
+          })
       } else {
         updateTableDataApi({
           id: currentUpdateId.value,
           username: formData.username
-        }).then(() => {
+        })
+          .then(() => {
             ElMessage.success("修改成功")
-          dialogVisible.value = false
             getTableData()
           })
+          .finally(() => {
+            dialogVisible.value = false
+          })
       }
     } else {
-      return false
+      console.error("表单校验不通过", fields)
     }
   })
 }
@@ -109,20 +113,11 @@ const getTableData = () => {
     })
 }
 const handleSearch = () => {
-  if (paginationData.currentPage === 1) {
+  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
-    getTableData()
-  }
-  paginationData.currentPage = 1
 }
 const resetSearch = () => {
   searchFormRef.value?.resetFields()
-  if (paginationData.currentPage === 1) {
+  handleSearch()
-    getTableData()
-  }
-  paginationData.currentPage = 1
-}
-const handleRefresh = () => {
-  getTableData()
 }
 //#endregion
 
@@ -156,8 +151,8 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
           <el-tooltip content="下载">
             <el-button type="primary" :icon="Download" circle />
           </el-tooltip>
-          <el-tooltip content="刷新表格">
+          <el-tooltip content="刷新当前页">
-            <el-button type="primary" :icon="RefreshRight" circle @click="handleRefresh" />
+            <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
           </el-tooltip>
         </div>
       </div>

src/views/table/vxe-table/index.vue

@@ -11,12 +11,11 @@ import {
   type VxeModalInstance,
   type VxeModalProps,
   type VxeFormInstance,
-  type VxeFormProps,
+  type VxeFormProps
-  type VxeGridPropTypes,
-  type VxeFormDefines
 } from "vxe-table"
 
 defineOptions({
+  // 命名当前组件
   name: "VxeTable"
 })
 
@@ -136,26 +135,22 @@ const xGridOpt: VxeGridProps = reactive({
       total: "total"
     },
     ajax: {
-      query: ({ page, form }: VxeGridPropTypes.ProxyAjaxQueryParams) => {
+      query: ({ page, form }) => {
         xGridOpt.loading = true
         crudStore.clearTable()
-        return new Promise<any>((resolve: Function) => {
+        return new Promise((resolve) => {
           let total = 0
           let result: RowMeta[] = []
           /** 加载数据 */
           const callback = (res: GetTableResponseData) => {
-            if (res && res.data) {
+            if (res?.data) {
-              const resData = res.data
               // 总数
-              if (Number.isInteger(resData.total)) {
+              total = res.data.total
-                total = resData.total
+              // 列表数据
-              }
+              result = res.data.list
-              // 分页数据
-              if (Array.isArray(resData.list)) {
-                result = resData.list
-              }
             }
             xGridOpt.loading = false
+            // 返回值有格式要求，详情见 vxe-table 官方文档
             resolve({ total, result })
           }
 
@@ -191,7 +186,7 @@ const xModalOpt: VxeModalProps = reactive({
 
 //#region vxe-form
 const xFormDom = ref<VxeFormInstance>()
-const xFormOpt = reactive<VxeFormProps>({
+const xFormOpt: VxeFormProps = reactive({
   span: 24,
   titleWidth: "100px",
   loading: false,
@@ -234,10 +229,10 @@ const xFormOpt = reactive<VxeFormProps>({
       {
         required: true,
         validator: ({ itemValue }) => {
-          if (!itemValue) {
+          switch (true) {
+            case !itemValue:
               return new Error("请输入")
-          }
+            case !itemValue.trim():
-          if (!itemValue.trim()) {
               return new Error("空格无效")
           }
         }
@@ -247,10 +242,10 @@ const xFormOpt = reactive<VxeFormProps>({
       {
         required: true,
         validator: ({ itemValue }) => {
-          if (!itemValue) {
+          switch (true) {
+            case !itemValue:
               return new Error("请输入")
-          }
+            case !itemValue.trim():
-          if (!itemValue.trim()) {
               return new Error("空格无效")
           }
         }
@@ -260,9 +255,9 @@ const xFormOpt = reactive<VxeFormProps>({
 })
 //#endregion
 
-//#region CRUD
+//#region 增删改查
 const crudStore = reactive({
-  /** 表单类型：修改：true 新增：false */
+  /** 表单类型，true 表示修改，false 表示新增 */
   isUpdate: true,
   /** 加载表格数据 */
   commitQuery: () => xGridDom.value?.commitProxy("query"),
@@ -280,11 +275,8 @@ const crudStore = reactive({
       xModalOpt.title = "新增用户"
     }
     // 禁用表单项
-    if (xFormOpt.items) {
+    const props = xFormOpt.items?.[0]?.itemRender?.props
-      if (xFormOpt.items[0]?.itemRender?.props) {
+    props && (props.disabled = crudStore.isUpdate)
-        xFormOpt.items[0].itemRender.props.disabled = crudStore.isUpdate
-      }
-    }
     xModalDom.value?.open()
     nextTick(() => {
       !crudStore.isUpdate && xFormDom.value?.reset()
@@ -294,39 +286,38 @@ const crudStore = reactive({
   /** 确定并保存 */
   onSubmitForm: () => {
     if (xFormOpt.loading) return
-    xFormDom.value?.validate((errMap?: VxeFormDefines.ValidateErrorMapParams) => {
+    xFormDom.value?.validate((errMap) => {
       if (errMap) return
       xFormOpt.loading = true
-      const callback = (err?: any) => {
+      const callback = () => {
         xFormOpt.loading = false
-        if (err) return
         xModalDom.value?.close()
         ElMessage.success("操作成功")
         !crudStore.isUpdate && crudStore.afterInsert()
         crudStore.commitQuery()
       }
       if (crudStore.isUpdate) {
-        // 调用修改接口
+        // 模拟调用修改接口成功
         setTimeout(() => callback(), 1000)
       } else {
-        // 调用新增接口
+        // 模拟调用新增接口成功
         setTimeout(() => callback(), 1000)
       }
     })
   },
   /** 新增后是否跳入最后一页 */
   afterInsert: () => {
-    const pager: VxeGridPropTypes.ProxyAjaxQueryPageParams | undefined = xGridDom.value?.getProxyInfo()?.pager
+    const pager = xGridDom.value?.getProxyInfo()?.pager
     if (pager) {
-      const currTotal: number = pager.currentPage * pager.pageSize
+      const currentTotal = pager.currentPage * pager.pageSize
-      if (currTotal === pager.total) {
+      if (currentTotal === pager.total) {
         ++pager.currentPage
       }
     }
   },
   /** 删除 */
   onDelete: (row: RowMeta) => {
-    const tip = `确定 <strong style='color:red;'>删除</strong> 用户 <strong style='color:#409eff;'>${row.username}</strong> ？`
+    const tip = `确定 <strong style="color: red"> 删除 </strong> 用户 <strong style="color: #409eff"> ${row.username} </strong> ？`
     const config: ElMessageBoxOptions = {
       type: "warning",
       showClose: true,
@@ -336,28 +327,24 @@ const crudStore = reactive({
       confirmButtonText: "确定",
       dangerouslyUseHTMLString: true
     }
-    ElMessageBox.confirm(tip, "提示", config)
+    ElMessageBox.confirm(tip, "提示", config).then(() => {
-      .then(() => {
+      deleteTableDataApi(row.id).then(() => {
-        deleteTableDataApi(row.id)
-          .then(() => {
         ElMessage.success("删除成功")
         crudStore.afterDelete()
         crudStore.commitQuery()
       })
-          .catch(() => 1)
     })
-      .catch(() => 1)
   },
   /** 删除后是否返回上一页 */
   afterDelete: () => {
     const tableData: RowMeta[] = xGridDom.value!.getData()
-    const pager: VxeGridPropTypes.ProxyAjaxQueryPageParams | undefined = xGridDom.value?.getProxyInfo()?.pager
+    const pager = xGridDom.value?.getProxyInfo()?.pager
     if (pager && pager.currentPage > 1 && tableData.length === 1) {
       --pager.currentPage
     }
   },
   /** 更多自定义方法 */
-  moreFunc: () => {}
+  moreFn: () => {}
 })
 //#endregion
 </script>
@@ -384,5 +371,3 @@ const crudStore = reactive({
     </vxe-modal>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

src/views/table/vxe-table/tsx/StatusColumnSolts.tsx

@@ -3,12 +3,7 @@ import { type VxeColumnPropTypes } from "vxe-table/types/column"
 const solts: VxeColumnPropTypes.Slots = {
   default: ({ row, column }) => {
     const cellValue = row[column.field]
-    let type = "danger"
+    const [type, value] = cellValue ? ["success", "启用"] : ["danger", "禁用"]
-    let value = "禁用"
-    if (cellValue) {
-      type = "success"
-      value = "启用"
-    }
     return [<span class={`el-tag el-tag--${type} el-tag--plain`}>{value}</span>]
   }
 }