feat: vxe table dict tag【6c40712d】

pull/62/head
YunaiV 2025-03-26 19:30:54 +08:00
parent efa27360a3
commit 3b1e039ede
2 changed files with 35 additions and 3 deletions

View File

@ -1,8 +1,9 @@
import { h } from 'vue';
import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
import { useDictStore } from '#/store';
import { Button, Image } from 'ant-design-vue';
import { Button, Image, Tag } from 'ant-design-vue';
import { useVbenForm } from './form';
@ -35,7 +36,7 @@ setupVbenVxeTable({
autoLoad: true,
response: {
result: 'list',
total: 'total'
total: 'total',
},
showActiveMsg: true,
showResponseMsg: false,
@ -72,6 +73,33 @@ setupVbenVxeTable({
},
});
// 表格配置项可以用 cellRender: { name: 'CellDict', props:{dictType: ''} },
// TODO @芋艿:后续研究下,看看有没优解
vxeUI.renderer.add('CellDict', {
renderTableDefault(renderOpts, params) {
const dictStore = useDictStore();
const { props } = renderOpts;
const { column, row } = params;
if (!props) {
return '';
}
const dict = dictStore.getDictData(props.type, row[column.field]);
// 转义
if (dict) {
if (`${dict.colorType}` === 'primary') dict.colorType = 'processing';
else if (`${dict.colorType}` === 'danger') dict.colorType = 'error';
else if (`${dict.colorType}` === 'info') dict.colorType = 'default';
else if (!dict.colorType) dict.colorType = 'default';
return h(
Tag,
{ color: dict.colorType },
{ default: () => dict.label },
);
}
return '';
},
});
// 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
// vxeUI.formats.add
},

View File

@ -44,7 +44,11 @@ export const columns: VxeGridProps['columns'] = [
{ field: 'code', title: '岗位编码' },
{ field: 'sort', title: '岗位顺序' },
{ field: 'remark', title: '岗位备注' },
{ field: 'status', title: '状态' },
{
field: 'status',
title: '状态',
cellRender: { name: 'CellDict', props: { type: 'common_status' } },
},
{ field: 'createTime', formatter: 'formatDateTime', title: '创建时间' },
{
field: 'action',