From e577b084c7b781939c872aa5519b6655e7dad737 Mon Sep 17 00:00:00 2001
From: dylanmay <670374839@qq.com>
Date: Fri, 7 Nov 2025 13:21:42 +0800
Subject: [PATCH] fix: change table to grid

---
 .../mp/components/wx-material-select/main.vue | 410 +++++++++++-------
 .../mp/material/components/VideoTable.vue     | 148 ++++---
 .../mp/material/components/VoiceTable.vue     | 134 ++++--
 .../src/views/mp/message/MessageTable.vue     | 329 +++++++-------
 4 files changed, 609 insertions(+), 412 deletions(-)

diff --git a/apps/web-antd/src/views/mp/components/wx-material-select/main.vue b/apps/web-antd/src/views/mp/components/wx-material-select/main.vue
index 5ca164ee8..0f81fd24b 100644
--- a/apps/web-antd/src/views/mp/components/wx-material-select/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/main.vue
@@ -1,11 +1,14 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { reactive, ref, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
-import { formatDate2 } from '@vben/utils';
 
-import { Button, Pagination, Row, Spin, Table } from 'ant-design-vue';
+import { Button, Pagination, Row, Spin } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import * as MpDraftApi from '#/api/mp/draft';
 import * as MpFreePublishApi from '#/api/mp/freePublish';
 import * as MpMaterialApi from '#/api/mp/material';
@@ -45,28 +48,159 @@ const queryParams = reactive({
   pageSize: 10,
 });
 
+const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
+  {
+    field: 'mediaId',
+    title: '编号',
+    align: 'center',
+    minWidth: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    minWidth: 200,
+  },
+  {
+    field: 'voice',
+    title: '语音',
+    minWidth: 200,
+    align: 'center',
+    slots: { default: 'voice' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    width: 180,
+    formatter: 'formatDateTime',
+  },
+  {
+    title: '操作',
+    width: 140,
+    fixed: 'right',
+    align: 'center',
+    slots: { default: 'actions' },
+  },
+];
+
+const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
+  {
+    field: 'mediaId',
+    title: '编号',
+    minWidth: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    minWidth: 200,
+  },
+  {
+    field: 'title',
+    title: '标题',
+    minWidth: 200,
+  },
+  {
+    field: 'introduction',
+    title: '介绍',
+    minWidth: 220,
+  },
+  {
+    field: 'video',
+    title: '视频',
+    minWidth: 220,
+    align: 'center',
+    slots: { default: 'video' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    width: 180,
+    formatter: 'formatDateTime',
+  },
+  {
+    title: '操作',
+    width: 140,
+    fixed: 'right',
+    align: 'center',
+    slots: { default: 'actions' },
+  },
+];
+
+const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: voiceGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? queryParams.accountId;
+          if (finalAccountId === undefined || finalAccountId === null) {
+            return { list: [], total: 0 };
+          }
+          return await MpMaterialApi.getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'voice',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+const [VideoGrid, videoGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: videoGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? queryParams.accountId;
+          if (finalAccountId === undefined || finalAccountId === null) {
+            return { list: [], total: 0 };
+          }
+          return await MpMaterialApi.getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'video',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
 function selectMaterialFun(item: any) {
   emit('selectMaterial', item);
 }
 
-async function getPage() {
-  loading.value = true;
-  try {
-    if (props.type === 'news' && props.newsType === NewsType.Published) {
-      // 【图文】+ 【已发布】
-      await getFreePublishPageFun();
-    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
-      // 【图文】+ 【草稿】
-      await getDraftPageFun();
-    } else {
-      // 【素材】
-      await getMaterialPageFun();
-    }
-  } finally {
-    loading.value = false;
-  }
-}
-
 async function getMaterialPageFun() {
   const data = await MpMaterialApi.getMaterialPage({
     ...queryParams,
@@ -100,87 +234,63 @@ async function getDraftPageFun() {
   total.value = data.total;
 }
 
-const voiceColumns = [
-  {
-    title: '编号',
-    dataIndex: 'mediaId',
-    align: 'center' as const,
-  },
-  {
-    title: '文件名',
-    dataIndex: 'name',
-    align: 'center' as const,
-  },
-  {
-    title: '语音',
-    key: 'voice',
-    align: 'center' as const,
-  },
-  {
-    title: '上传时间',
-    dataIndex: 'createTime',
-    align: 'center' as const,
-    width: 180,
-    customRender: ({ record }: any) => formatDate2(record.createTime),
-  },
-  {
-    title: '操作',
-    key: 'action',
-    align: 'center' as const,
-    fixed: 'right' as const,
-  },
-];
+async function getPage() {
+  if (props.type === 'voice') {
+    await voiceGridApi.reload({ accountId: queryParams.accountId });
+    return;
+  }
+  if (props.type === 'video') {
+    await videoGridApi.reload({ accountId: queryParams.accountId });
+    return;
+  }
 
-const videoColumns = [
-  {
-    title: '编号',
-    dataIndex: 'mediaId',
-    align: 'center' as const,
-  },
-  {
-    title: '文件名',
-    dataIndex: 'name',
-    align: 'center' as const,
-  },
-  {
-    title: '标题',
-    dataIndex: 'title',
-    align: 'center' as const,
-  },
-  {
-    title: '介绍',
-    dataIndex: 'introduction',
-    align: 'center' as const,
-  },
-  {
-    title: '视频',
-    key: 'video',
-    align: 'center' as const,
-  },
-  {
-    title: '上传时间',
-    dataIndex: 'createTime',
-    align: 'center' as const,
-    width: 180,
-    customRender: ({ record }: any) => formatDate2(record.createTime),
-  },
-  {
-    title: '操作',
-    key: 'action',
-    align: 'center' as const,
-    fixed: 'right' as const,
-  },
-];
+  loading.value = true;
+  try {
+    if (props.type === 'news' && props.newsType === NewsType.Published) {
+      await getFreePublishPageFun();
+    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
+      await getDraftPageFun();
+    } else {
+      await getMaterialPageFun();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
 
-onMounted(async () => {
-  getPage();
-});
+watch(
+  () => props.accountId,
+  (accountId) => {
+    queryParams.accountId = accountId;
+    queryParams.pageNo = 1;
+    getPage();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.type,
+  () => {
+    queryParams.pageNo = 1;
+    getPage();
+  },
+);
+
+watch(
+  () => props.newsType,
+  () => {
+    if (props.type === 'news') {
+      queryParams.pageNo = 1;
+      getPage();
+    }
+  },
+);
 </script>
 
 <template>
-  <div class="pb-8">
+  <Page :bordered="false" class="pb-8">
     <!-- 类型：image -->
-    <div v-if="props.type === 'image'">
+    <template v-if="props.type === 'image'">
       <Spin :spinning="loading">
         <div class="waterfall">
           <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
@@ -197,84 +307,52 @@ onMounted(async () => {
           </div>
         </div>
       </Spin>
-      <!-- 分页组件 -->
-      <Pagination
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        :total="total"
-        class="mt-4"
-        @change="getMaterialPageFun"
-      />
-    </div>
-
-    <!-- 类型：voice -->
-    <div v-else-if="props.type === 'voice'">
-      <Table
-        :columns="voiceColumns"
-        :data-source="list"
-        :loading="loading"
-        :pagination="false"
-        row-key="mediaId"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'voice'">
-            <WxVoicePlayer :url="record.url" />
-          </template>
-          <template v-else-if="column.key === 'action'">
-            <Button type="link" @click="selectMaterialFun(record)">
-              选择
-              <template #icon>
-                <IconifyIcon icon="mdi:plus" />
-              </template>
-            </Button>
-          </template>
-        </template>
-      </Table>
-      <!-- 分页组件 -->
       <Pagination
         v-model:current="queryParams.pageNo"
         v-model:page-size="queryParams.pageSize"
         :total="total"
         class="mt-4"
         @change="getPage"
+        @show-size-change="getPage"
       />
-    </div>
+    </template>
+
+    <!-- 类型：voice -->
+    <template v-else-if="props.type === 'voice'">
+      <VoiceGrid>
+        <template #voice="{ row }">
+          <WxVoicePlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <Button type="link" @click="selectMaterialFun(row)">
+            选择
+            <template #icon>
+              <IconifyIcon icon="mdi:plus" />
+            </template>
+          </Button>
+        </template>
+      </VoiceGrid>
+    </template>
 
     <!-- 类型：video -->
-    <div v-else-if="props.type === 'video'">
-      <Table
-        :columns="videoColumns"
-        :data-source="list"
-        :loading="loading"
-        :pagination="false"
-        row-key="mediaId"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'video'">
-            <WxVideoPlayer :url="record.url" />
-          </template>
-          <template v-else-if="column.key === 'action'">
-            <Button type="link" @click="selectMaterialFun(record)">
-              选择
-              <template #icon>
-                <IconifyIcon icon="mdi:plus-circle" />
-              </template>
-            </Button>
-          </template>
+    <template v-else-if="props.type === 'video'">
+      <VideoGrid>
+        <template #video="{ row }">
+          <WxVideoPlayer :url="row.url" />
         </template>
-      </Table>
-      <!-- 分页组件 -->
-      <Pagination
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        :total="total"
-        class="mt-4"
-        @change="getMaterialPageFun"
-      />
-    </div>
+        <template #actions="{ row }">
+          <Button type="link" @click="selectMaterialFun(row)">
+            选择
+            <template #icon>
+              <IconifyIcon icon="mdi:plus-circle" />
+            </template>
+          </Button>
+        </template>
+      </VideoGrid>
+    </template>
 
     <!-- 类型：news -->
-    <div v-else-if="props.type === 'news'">
+    <template v-else-if="props.type === 'news'">
       <Spin :spinning="loading">
         <div class="waterfall">
           <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
@@ -292,16 +370,16 @@ onMounted(async () => {
           </div>
         </div>
       </Spin>
-      <!-- 分页组件 -->
       <Pagination
         v-model:current="queryParams.pageNo"
         v-model:page-size="queryParams.pageSize"
         :total="total"
         class="mt-4"
-        @change="getMaterialPageFun"
+        @change="getPage"
+        @show-size-change="getPage"
       />
-    </div>
-  </div>
+    </template>
+  </Page>
 </template>
 
 <style lang="scss" scoped>
diff --git a/apps/web-antd/src/views/mp/material/components/VideoTable.vue b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
index 19da10d11..8dce040c5 100644
--- a/apps/web-antd/src/views/mp/material/components/VideoTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
@@ -1,10 +1,15 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { watch } from 'vue';
+
 import { useAccess } from '@vben/access';
 import { IconifyIcon } from '@vben/icons';
 import { formatDate2 } from '@vben/utils';
 
-import { Button, Table } from 'ant-design-vue';
+import { Button } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
 
 const props = defineProps<{
@@ -18,74 +23,119 @@ const emit = defineEmits<{
 
 const { hasAccessByCodes } = useAccess();
 
-const columns = [
+const columns: VxeTableGridOptions<any>['columns'] = [
   {
-    align: 'center' as const,
-    dataIndex: 'mediaId',
-    key: 'mediaId',
+    field: 'mediaId',
     title: '编号',
+    align: 'center',
+    width: 160,
   },
-  { align: 'center' as const, dataIndex: 'name', key: 'name', title: '文件名' },
-  { align: 'center' as const, dataIndex: 'title', key: 'title', title: '标题' },
   {
-    align: 'center' as const,
-    dataIndex: 'introduction',
-    key: 'introduction',
+    field: 'name',
+    title: '文件名',
+    align: 'center',
+    minWidth: 200,
+  },
+  {
+    field: 'title',
+    title: '标题',
+    align: 'center',
+    minWidth: 200,
+  },
+  {
+    field: 'introduction',
     title: '介绍',
+    align: 'center',
+    minWidth: 220,
   },
-  { align: 'center' as const, key: 'video', title: '视频' },
   {
-    align: 'center' as const,
-    key: 'createTime',
+    field: 'video',
+    title: '视频',
+    align: 'center',
+    width: 220,
+    slots: { default: 'video' },
+  },
+  {
+    field: 'createTime',
     title: '上传时间',
+    align: 'center',
     width: 180,
+    slots: { default: 'createTime' },
   },
   {
-    align: 'center' as const,
-    fixed: 'right' as const,
-    key: 'action',
+    field: 'actions',
     title: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 180,
+    slots: { default: 'actions' },
   },
 ];
 
-// 下载文件
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<any>,
+});
+
 function handleDownload(url: string) {
   window.open(url, '_blank');
 }
+
+watch(
+  () => props.list,
+  (list: any[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(!!loading);
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
-  <Table
-    :columns="columns"
-    :data-source="props.list"
-    :loading="props.loading"
-    :pagination="false"
-    bordered
-    class="mt-4"
-    row-key="id"
-  >
-    <template #bodyCell="{ column, record }">
-      <template v-if="column.key === 'video'">
-        <WxVideoPlayer v-if="record.url" :url="record.url" />
-      </template>
-      <template v-else-if="column.key === 'createTime'">
-        {{ formatDate2(record.createTime) }}
-      </template>
-      <template v-else-if="column.key === 'action'">
-        <Button type="link" @click="handleDownload(record.url)">
-          <IconifyIcon icon="mdi:download" />
-          下载
-        </Button>
-        <Button
-          v-if="hasAccessByCodes(['mp:material:delete'])"
-          danger
-          type="link"
-          @click="emit('delete', record.id)"
-        >
-          <IconifyIcon icon="mdi:delete" />
-          删除
-        </Button>
-      </template>
+  <Grid class="mt-4">
+    <template #video="{ row }">
+      <WxVideoPlayer v-if="row.url" :url="row.url" />
     </template>
-  </Table>
+    <template #createTime="{ row }">
+      {{ formatDate2(row.createTime) }}
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDownload(row.url)">
+        <IconifyIcon icon="mdi:download" />
+        下载
+      </Button>
+      <Button
+        v-if="hasAccessByCodes(['mp:material:delete'])"
+        danger
+        type="link"
+        @click="emit('delete', row.id)"
+      >
+        <IconifyIcon icon="mdi:delete" />
+        删除
+      </Button>
+    </template>
+  </Grid>
 </template>
diff --git a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
index 01a3a0758..4e889fb7c 100644
--- a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
@@ -1,10 +1,15 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { watch } from 'vue';
+
 import { useAccess } from '@vben/access';
 import { IconifyIcon } from '@vben/icons';
 import { formatDate2 } from '@vben/utils';
 
-import { Button, Table } from 'ant-design-vue';
+import { Button } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
 
 const props = defineProps<{
@@ -18,66 +23,107 @@ const emit = defineEmits<{
 
 const { hasAccessByCodes } = useAccess();
 
-const columns = [
+const columns: VxeTableGridOptions<any>['columns'] = [
   {
-    align: 'center' as const,
-    dataIndex: 'mediaId',
-    key: 'mediaId',
+    field: 'mediaId',
     title: '编号',
+    align: 'center',
+    width: 160,
   },
-  { align: 'center' as const, dataIndex: 'name', key: 'name', title: '文件名' },
-  { align: 'center' as const, key: 'voice', title: '语音' },
   {
-    align: 'center' as const,
-    key: 'createTime',
+    field: 'name',
+    title: '文件名',
+    align: 'center',
+    minWidth: 200,
+  },
+  {
+    field: 'voice',
+    title: '语音',
+    align: 'center',
+    width: 220,
+    slots: { default: 'voice' },
+  },
+  {
+    field: 'createTime',
     title: '上传时间',
+    align: 'center',
     width: 180,
+    slots: { default: 'createTime' },
   },
   {
-    align: 'center' as const,
-    fixed: 'right' as const,
-    key: 'action',
+    field: 'actions',
     title: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 160,
+    slots: { default: 'actions' },
   },
 ];
 
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<any>,
+});
+
 function handleDownload(url: string) {
   window.open(url, '_blank');
 }
+
+watch(
+  () => props.list,
+  (list: any[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(!!loading);
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
-  <Table
-    :columns="columns"
-    :data-source="props.list"
-    :loading="props.loading"
-    :pagination="false"
-    bordered
-    class="mt-4"
-    row-key="id"
-  >
-    <template #bodyCell="{ column, record }">
-      <template v-if="column.key === 'voice'">
-        <WxVoicePlayer v-if="record.url" :url="record.url" />
-      </template>
-      <template v-else-if="column.key === 'createTime'">
-        {{ formatDate2(record.createTime) }}
-      </template>
-      <template v-else-if="column.key === 'action'">
-        <Button type="link" @click="handleDownload(record.url)">
-          <IconifyIcon icon="mdi:download" />
-          下载
-        </Button>
-        <Button
-          v-if="hasAccessByCodes(['mp:material:delete'])"
-          danger
-          type="link"
-          @click="emit('delete', record.id)"
-        >
-          <IconifyIcon icon="mdi:delete" />
-          删除
-        </Button>
-      </template>
+  <Grid class="mt-4">
+    <template #voice="{ row }">
+      <WxVoicePlayer v-if="row.url" :url="row.url" />
     </template>
-  </Table>
+    <template #createTime="{ row }">
+      {{ formatDate2(row.createTime) }}
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDownload(row.url)">
+        <IconifyIcon icon="mdi:download" />
+        下载
+      </Button>
+      <Button
+        v-if="hasAccessByCodes(['mp:material:delete'])"
+        danger
+        type="link"
+        @click="emit('delete', row.id)"
+      >
+        <IconifyIcon icon="mdi:delete" />
+        删除
+      </Button>
+    </template>
+  </Grid>
 </template>
diff --git a/apps/web-antd/src/views/mp/message/MessageTable.vue b/apps/web-antd/src/views/mp/message/MessageTable.vue
index f7cbf91ee..d7bcbbe41 100644
--- a/apps/web-antd/src/views/mp/message/MessageTable.vue
+++ b/apps/web-antd/src/views/mp/message/MessageTable.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
-import type { TableColumnsType } from 'ant-design-vue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { onMounted, watch } from 'vue';
 
 import { formatDate2 } from '@vben/utils';
 
-import { Button, Image, Table, Tag } from 'ant-design-vue';
+import { Button, Image, Tag } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { WxLocation } from '#/views/mp/components/wx-location';
 import { MsgType } from '#/views/mp/components/wx-msg/types';
 import { WxMusic } from '#/views/mp/components/wx-music';
@@ -29,190 +32,210 @@ const emit = defineEmits<{
   (e: 'send', userId: number): void;
 }>();
 
-const columns: TableColumnsType = [
+const columns: VxeTableGridOptions<any>['columns'] = [
   {
+    field: 'createTime',
     title: '发送时间',
-    dataIndex: 'createTime',
     width: 180,
     align: 'center',
-    customRender({ record }) {
-      return formatDate2(record.createTime);
-    },
+    slots: { default: 'createTime' },
   },
   {
+    field: 'type',
     title: '消息类型',
-    dataIndex: 'type',
     width: 80,
     align: 'center',
   },
   {
+    field: 'sendFrom',
     title: '发送方',
-    dataIndex: 'sendFrom',
     width: 80,
     align: 'center',
+    slots: { default: 'sendFrom' },
   },
   {
+    field: 'openid',
     title: '用户标识',
-    dataIndex: 'openid',
     width: 300,
     align: 'center',
   },
   {
+    field: 'content',
     title: '内容',
-    dataIndex: 'content',
     align: 'left',
+    minWidth: 320,
+    slots: { default: 'content' },
   },
   {
+    field: 'actions',
     title: '操作',
-    key: 'action',
     width: 120,
     align: 'center',
     fixed: 'right',
+    slots: { default: 'actions' },
   },
 ];
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<any>,
+});
+
+function normalizeList(list?: any[]) {
+  return Array.isArray(list) ? list : [];
+}
+
+function updateGridData(data: any[]) {
+  if (gridApi.grid?.loadData) {
+    gridApi.grid.loadData(data);
+  } else {
+    gridApi.setGridOptions({ data });
+  }
+}
+
+onMounted(() => {
+  updateGridData(normalizeList(props.list));
+  gridApi.setLoading(!!props.loading);
+});
+
+watch(
+  () => props.list,
+  (list) => {
+    updateGridData(normalizeList(list));
+  },
+  { flush: 'post' },
+);
+
+watch(
+  () => props.loading,
+  (loading) => {
+    gridApi.setLoading(!!loading);
+  },
+);
 </script>
 
 <template>
-  <Table
-    :columns="columns"
-    :data-source="props.list"
-    :loading="props.loading"
-    :pagination="false"
-    row-key="id"
-  >
-    <!-- 发送方列 -->
-    <template #bodyCell="{ column, record }">
-      <template v-if="column.dataIndex === 'sendFrom'">
-        <Tag v-if="record.sendFrom === 1" color="success">粉丝</Tag>
-        <Tag v-else color="default">公众号</Tag>
-      </template>
-
-      <!-- 内容列 -->
-      <template v-else-if="column.dataIndex === 'content'">
-        <!-- 【事件】区域 -->
-        <div
-          v-if="record.type === MsgType.Event && record.event === 'subscribe'"
-        >
-          <Tag color="success">关注</Tag>
-        </div>
-        <div
-          v-else-if="
-            record.type === MsgType.Event && record.event === 'unsubscribe'
-          "
-        >
-          <Tag color="error">取消关注</Tag>
-        </div>
-        <div
-          v-else-if="record.type === MsgType.Event && record.event === 'CLICK'"
-        >
-          <Tag>点击菜单</Tag>
-          【{{ record.eventKey }}】
-        </div>
-        <div
-          v-else-if="record.type === MsgType.Event && record.event === 'VIEW'"
-        >
-          <Tag>点击菜单链接</Tag>
-          【{{ record.eventKey }}】
-        </div>
-        <div
-          v-else-if="
-            record.type === MsgType.Event && record.event === 'scancode_waitmsg'
-          "
-        >
-          <Tag>扫码结果</Tag>
-          【{{ record.eventKey }}】
-        </div>
-        <div
-          v-else-if="
-            record.type === MsgType.Event && record.event === 'scancode_push'
-          "
-        >
-          <Tag>扫码结果</Tag>
-          【{{ record.eventKey }}】
-        </div>
-        <div
-          v-else-if="
-            record.type === MsgType.Event && record.event === 'pic_sysphoto'
-          "
-        >
-          <Tag>系统拍照发图</Tag>
-        </div>
-        <div
-          v-else-if="
-            record.type === MsgType.Event &&
-            record.event === 'pic_photo_or_album'
-          "
-        >
-          <Tag>拍照或者相册</Tag>
-        </div>
-        <div
-          v-else-if="
-            record.type === MsgType.Event && record.event === 'pic_weixin'
-          "
-        >
-          <Tag>微信相册</Tag>
-        </div>
-        <div
-          v-else-if="
-            record.type === MsgType.Event && record.event === 'location_select'
-          "
-        >
-          <Tag>选择地理位置</Tag>
-        </div>
-        <div v-else-if="record.type === MsgType.Event">
-          <Tag color="error">未知事件类型</Tag>
-        </div>
-
-        <!-- 【消息】区域 -->
-        <div v-else-if="record.type === MsgType.Text">{{ record.content }}</div>
-        <div v-else-if="record.type === MsgType.Voice">
-          <WxVoicePlayer :url="record.mediaUrl" :content="record.recognition" />
-        </div>
-        <div v-else-if="record.type === MsgType.Image">
-          <a :href="record.mediaUrl" target="_blank">
-            <Image :src="record.mediaUrl" :width="100" :preview="false" />
-          </a>
-        </div>
-        <div
-          v-else-if="
-            record.type === MsgType.Video || record.type === 'shortvideo'
-          "
-        >
-          <WxVideoPlayer :url="record.mediaUrl" class="mt-2" />
-        </div>
-        <div v-else-if="record.type === MsgType.Link">
-          <Tag>链接</Tag>
-          ：
-          <a :href="record.url" target="_blank">{{ record.title }}</a>
-        </div>
-        <div v-else-if="record.type === MsgType.Location">
-          <WxLocation
-            :label="record.label"
-            :location-y="record.locationY"
-            :location-x="record.locationX"
-          />
-        </div>
-        <div v-else-if="record.type === MsgType.Music">
-          <WxMusic
-            :title="record.title"
-            :description="record.description"
-            :thumb-media-url="record.thumbMediaUrl"
-            :music-url="record.musicUrl"
-            :hq-music-url="record.hqMusicUrl"
-          />
-        </div>
-        <div v-else-if="record.type === MsgType.News">
-          <WxNews :articles="record.articles" />
-        </div>
-        <div v-else>
-          <Tag color="error">未知消息类型</Tag>
-        </div>
-      </template>
-
-      <!-- 操作列 -->
-      <template v-else-if="column.key === 'action'">
-        <Button type="link" @click="emit('send', record.userId)"> 消息 </Button>
-      </template>
+  <Grid>
+    <template #createTime="{ row }">
+      {{ formatDate2(row.createTime) }}
     </template>
-  </Table>
+
+    <template #sendFrom="{ row }">
+      <Tag v-if="row.sendFrom === 1" color="success">粉丝</Tag>
+      <Tag v-else color="default">公众号</Tag>
+    </template>
+
+    <template #content="{ row }">
+      <div v-if="row.type === MsgType.Event && row.event === 'subscribe'">
+        <Tag color="success">关注</Tag>
+      </div>
+      <div
+        v-else-if="row.type === MsgType.Event && row.event === 'unsubscribe'"
+      >
+        <Tag color="error">取消关注</Tag>
+      </div>
+      <div v-else-if="row.type === MsgType.Event && row.event === 'CLICK'">
+        <Tag>点击菜单</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div v-else-if="row.type === MsgType.Event && row.event === 'VIEW'">
+        <Tag>点击菜单链接</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div
+        v-else-if="
+          row.type === MsgType.Event && row.event === 'scancode_waitmsg'
+        "
+      >
+        <Tag>扫码结果</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div
+        v-else-if="row.type === MsgType.Event && row.event === 'scancode_push'"
+      >
+        <Tag>扫码结果</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div
+        v-else-if="row.type === MsgType.Event && row.event === 'pic_sysphoto'"
+      >
+        <Tag>系统拍照发图</Tag>
+      </div>
+      <div
+        v-else-if="
+          row.type === MsgType.Event && row.event === 'pic_photo_or_album'
+        "
+      >
+        <Tag>拍照或者相册</Tag>
+      </div>
+      <div v-else-if="row.type === MsgType.Event && row.event === 'pic_weixin'">
+        <Tag>微信相册</Tag>
+      </div>
+      <div
+        v-else-if="
+          row.type === MsgType.Event && row.event === 'location_select'
+        "
+      >
+        <Tag>选择地理位置</Tag>
+      </div>
+      <div v-else-if="row.type === MsgType.Event">
+        <Tag color="error">未知事件类型</Tag>
+      </div>
+
+      <div v-else-if="row.type === MsgType.Text">{{ row.content }}</div>
+      <div v-else-if="row.type === MsgType.Voice">
+        <WxVoicePlayer :url="row.mediaUrl" :content="row.recognition" />
+      </div>
+      <div v-else-if="row.type === MsgType.Image">
+        <a :href="row.mediaUrl" target="_blank">
+          <Image :src="row.mediaUrl" :width="100" :preview="false" />
+        </a>
+      </div>
+      <div v-else-if="row.type === MsgType.Video || row.type === 'shortvideo'">
+        <WxVideoPlayer :url="row.mediaUrl" class="mt-2" />
+      </div>
+      <div v-else-if="row.type === MsgType.Link">
+        <Tag>链接</Tag>
+        ：
+        <a :href="row.url" target="_blank">{{ row.title }}</a>
+      </div>
+      <div v-else-if="row.type === MsgType.Location">
+        <WxLocation
+          :label="row.label"
+          :location-y="row.locationY"
+          :location-x="row.locationX"
+        />
+      </div>
+      <div v-else-if="row.type === MsgType.Music">
+        <WxMusic
+          :title="row.title"
+          :description="row.description"
+          :thumb-media-url="row.thumbMediaUrl"
+          :music-url="row.musicUrl"
+          :hq-music-url="row.hqMusicUrl"
+        />
+      </div>
+      <div v-else-if="row.type === MsgType.News">
+        <WxNews :articles="row.articles" />
+      </div>
+      <div v-else>
+        <Tag color="error">未知消息类型</Tag>
+      </div>
+    </template>
+
+    <template #actions="{ row }">
+      <Button type="link" @click="emit('send', row.userId)"> 消息 </Button>
+    </template>
+  </Grid>
 </template>