feat: vxe table dict tag【6c40712d】
parent
efa27360a3
commit
3b1e039ede
|
@ -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
|
||||
},
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue