diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
index f1d46c2f8..36c6148ab 100644
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -317,10 +317,12 @@ export function useDataGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'colorType',
       title: '颜色类型',
+      slots: { default: 'colorType' },
     },
     {
       field: 'cssClass',
       title: 'CSS Class',
+      slots: { default: 'cssClass' },
     },
     {
       title: '创建时间',
diff --git a/apps/web-antd/src/views/system/dict/modules/data-grid.vue b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
index 7079c8adb..58a6158fb 100644
--- a/apps/web-antd/src/views/system/dict/modules/data-grid.vue
+++ b/apps/web-antd/src/views/system/dict/modules/data-grid.vue
@@ -7,7 +7,7 @@ import { ref, watch } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { message, Tag } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -177,6 +177,12 @@ watch(
           ]"
         />
       </template>
+      <template #colorType="{ row }">
+        <Tag :color="row.colorType">{{ row.colorType }}</Tag>
+      </template>
+      <template #cssClass="{ row }">
+        <Tag :color="row.cssClass">{{ row.cssClass }}</Tag>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[