From d1c7480a4f2571e42ac1151d125569cfd7387439 Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Tue, 20 Jun 2023 09:13:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96=20?=
=?UTF-8?q?views/table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/table/element-plus/index.vue | 49 +++++-----
src/views/table/vxe-table/index.vue | 95 ++++++++-----------
.../table/vxe-table/tsx/StatusColumnSolts.tsx | 7 +-
3 files changed, 63 insertions(+), 88 deletions(-)
diff --git a/src/views/table/element-plus/index.vue b/src/views/table/element-plus/index.vue
index ab08e9b..fecfb30 100644
--- a/src/views/table/element-plus/index.vue
+++ b/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({
- username: formData.username,
- password: formData.password
- }).then(() => {
- ElMessage.success("新增成功")
- dialogVisible.value = false
- getTableData()
- })
+ createTableDataApi(formData)
+ .then(() => {
+ ElMessage.success("新增成功")
+ getTableData()
+ })
+ .finally(() => {
+ dialogVisible.value = false
+ })
} else {
updateTableDataApi({
id: currentUpdateId.value,
username: formData.username
- }).then(() => {
- ElMessage.success("修改成功")
- dialogVisible.value = false
- getTableData()
})
+ .then(() => {
+ ElMessage.success("修改成功")
+ getTableData()
+ })
+ .finally(() => {
+ dialogVisible.value = false
+ })
}
} else {
- return false
+ console.error("表单校验不通过", fields)
}
})
}
@@ -109,20 +113,11 @@ const getTableData = () => {
})
}
const handleSearch = () => {
- if (paginationData.currentPage === 1) {
- getTableData()
- }
- paginationData.currentPage = 1
+ paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
const resetSearch = () => {
searchFormRef.value?.resetFields()
- if (paginationData.currentPage === 1) {
- getTableData()
- }
- paginationData.currentPage = 1
-}
-const handleRefresh = () => {
- getTableData()
+ handleSearch()
}
//#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-button type="primary" :icon="RefreshRight" circle @click="handleRefresh" />
+ <el-tooltip content="刷新当前页">
+ <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
</el-tooltip>
</div>
</div>
diff --git a/src/views/table/vxe-table/index.vue b/src/views/table/vxe-table/index.vue
index 44dd7a6..00c1c4d 100644
--- a/src/views/table/vxe-table/index.vue
+++ b/src/views/table/vxe-table/index.vue
@@ -11,12 +11,11 @@ import {
type VxeModalInstance,
type VxeModalProps,
type VxeFormInstance,
- type VxeFormProps,
- type VxeGridPropTypes,
- type VxeFormDefines
+ type VxeFormProps
} 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) {
- const resData = res.data
+ if (res?.data) {
// 总数
- if (Number.isInteger(resData.total)) {
- total = resData.total
- }
- // 分页数据
- if (Array.isArray(resData.list)) {
- result = resData.list
- }
+ total = res.data.total
+ // 列表数据
+ result = res.data.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,11 +229,11 @@ const xFormOpt = reactive<VxeFormProps>({
{
required: true,
validator: ({ itemValue }) => {
- if (!itemValue) {
- return new Error("请输入")
- }
- if (!itemValue.trim()) {
- return new Error("空格无效")
+ switch (true) {
+ case !itemValue:
+ return new Error("请输入")
+ case !itemValue.trim():
+ return new Error("空格无效")
}
}
}
@@ -247,11 +242,11 @@ const xFormOpt = reactive<VxeFormProps>({
{
required: true,
validator: ({ itemValue }) => {
- if (!itemValue) {
- return new Error("请输入")
- }
- if (!itemValue.trim()) {
- return new Error("空格无效")
+ switch (true) {
+ case !itemValue:
+ return new Error("请输入")
+ case !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) {
- if (xFormOpt.items[0]?.itemRender?.props) {
- xFormOpt.items[0].itemRender.props.disabled = crudStore.isUpdate
- }
- }
+ const props = xFormOpt.items?.[0]?.itemRender?.props
+ props && (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
- if (currTotal === pager.total) {
+ const currentTotal = pager.currentPage * pager.pageSize
+ 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)
- .then(() => {
- deleteTableDataApi(row.id)
- .then(() => {
- ElMessage.success("删除成功")
- crudStore.afterDelete()
- crudStore.commitQuery()
- })
- .catch(() => 1)
+ ElMessageBox.confirm(tip, "提示", config).then(() => {
+ deleteTableDataApi(row.id).then(() => {
+ ElMessage.success("删除成功")
+ crudStore.afterDelete()
+ crudStore.commitQuery()
})
- .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>
diff --git a/src/views/table/vxe-table/tsx/StatusColumnSolts.tsx b/src/views/table/vxe-table/tsx/StatusColumnSolts.tsx
index de0036e..125263c 100644
--- a/src/views/table/vxe-table/tsx/StatusColumnSolts.tsx
+++ b/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"
- let value = "禁用"
- if (cellValue) {
- type = "success"
- value = "启用"
- }
+ const [type, value] = cellValue ? ["success", "启用"] : ["danger", "禁用"]
return [<span class={`el-tag el-tag--${type} el-tag--plain`}>{value}</span>]
}
}