perf: vxe demo

xingyu4j
1 parent a95694ae
Showing 2 changed files with 24 additions and 6 deletions
yudao-ui-admin-vue3/src/plugins/vxeTable/index.ts
yudao-ui-admin-vue3/src/views/system/post/index.vue
@@ -103,6 +103,9 @@ VXETable.setup({
   input: {
     clearable: true
   },
+  form: {
+    titleColon: true // 是否显示标题冒号
+  },
   modal: {
     width: 600, // 窗口的宽度
     height: 400, // 窗口的高度
@@ -124,6 +127,14 @@ VXETable.setup({
       : XEUtils.toFormatString(XEUtils.get(enUS, key), args)
   }
 })
+// 格式金额，默认2位数
+VXETable.formats.add('formatAmount', ({ cellValue }, digits = 2) => {
+  return XEUtils.commafy(XEUtils.toNumber(cellValue), { digits })
+})
+// 格式日期，默认 yyyy-MM-dd HH:mm:ss
+VXETable.formats.add('formatDate', ({ cellValue }, format = 'yyyy-MM-dd HH:mm:ss') => {
+  return XEUtils.toDateString(cellValue, format)
+})
 export const setupVxeTable = (app: App<Element>) => {
   // 表格功能
   app.use(Filter).use(Edit).use(Menu).use(Export).use(Keyboard).use(Validator)
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import dayjs from 'dayjs'
-import XEUtils from 'xe-utils'
 import { useI18n } from '@/hooks/web/useI18n'
-import { VxeFormEvents, VxeFormItemProps, VxeGrid, VxeGridInstance, VxeGridProps } from 'vxe-table'
+import {
+  VxeFormEvents,
+  VxeFormInstance,
+  VxeFormItemProps,
+  VxeGrid,
+  VxeGridInstance,
+  VxeGridProps
+} from 'vxe-table'
 import * as PostApi from '@/api/system/post'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { ContentWrap } from '@/components/ContentWrap'
@@ -14,6 +20,7 @@ import { ElMessage, ElMessageBox } from &#39;element-plus&#39;
 const { t } = useI18n() // 国际化
  
 const xGrid = ref<VxeGridInstance>()
+const xForm = ref<VxeFormInstance>()
 const dialogVisible = ref(false) // 是否显示弹出层
 const dialogTitle = ref('edit') // 弹出层标题
 const actionType = ref('') // 操作按钮的类型
@@ -93,9 +100,7 @@ const gridOptions = reactive&lt;VxeGridProps&gt;({
       title: t('common.createTime'),
       width: 160,
       sortable: true,
-      formatter({ cellValue }) {
-        return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
-      }
+      formatter: 'formatDate'
     },
     {
       field: 'action',
@@ -203,6 +208,8 @@ const handleDetail = (row: PostVO) =&gt; {
 }
 // 新增操作
 const handleCreate = () => {
+  const $form = xForm.value
+  $form?.reset()
   setDialogTile('create')
 }
  
@@ -308,11 +315,11 @@ const submitForm: VxeFormEvents.Submit = async () =&gt; {
     <template #default>
       <!-- 对话框(添加 / 修改) -->
       <vxe-form
+        ref="xForm"
         v-if="['create', 'update'].includes(actionType)"
         :data="formData"
         :items="formItems"
         :rules="rules"
-        titleColon
         @submit="submitForm"
       />
       <Descriptions