feat: vxe add CellIcon

apps/web-antd/src/adapter/vxe-table.ts

@@ -1,5 +1,6 @@
 import { h } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
 
 import { Button, Image, Tag } from 'ant-design-vue';
@@ -74,7 +75,7 @@ setupVbenVxeTable({
       },
     });
 
-    // 表格配置项可以用 cellRender: { name: 'CellDict',props:{dictType: ''} },
+    // 字典 表格配置项可以用 cellRender: { name: 'CellDict',props:{dictType: ''} },
     vxeUI.renderer.add('CellDict', {
       renderTableDefault(renderOpts, params) {
         const { props } = renderOpts;
@@ -98,6 +99,13 @@ setupVbenVxeTable({
         return '';
       },
     });
+    // 图标 表格配置项可以用 cellRender: { name: 'CellIcon' },
+    vxeUI.renderer.add('CellIcon', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        return h(IconifyIcon, { icon: row[column.field], size: 14 });
+      },
+    });
 
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add

apps/web-antd/src/views/system/menu/menu.data.ts

@@ -31,8 +31,21 @@ export const formSchema: VbenFormSchema[] = [
 export const columns: VxeGridProps['columns'] = [
   // { title: '序号', type: 'seq', width: 50 },
   // { field: 'id', title: '岗位编号' },
-  { field: 'name', title: '菜单名称', minWidth: 200, treeNode: true },
-  { field: 'icon', title: '图标' },
+  { field: 'name', title: '菜单名称', minWidth: 100, treeNode: true },
+  {
+    field: 'icon',
+    title: '菜单图标',
+    cellRender: { name: 'CellIcon' },
+    width: 100,
+  },
+  {
+    field: 'type',
+    title: '菜单类型',
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
+    },
+  },
   { field: 'permission', title: '权限标识' },
   { field: 'component', title: '组件路径' },
   { field: 'componentName', title: '组件名称' },