feat: vxe table dict tag【6c40712d】
parent
efa27360a3
commit
3b1e039ede
|
|
@ -1,8 +1,9 @@
|
||||||
import { h } from 'vue';
|
import { h } from 'vue';
|
||||||
|
|
||||||
import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
|
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';
|
import { useVbenForm } from './form';
|
||||||
|
|
||||||
|
|
@ -35,7 +36,7 @@ setupVbenVxeTable({
|
||||||
autoLoad: true,
|
autoLoad: true,
|
||||||
response: {
|
response: {
|
||||||
result: 'list',
|
result: 'list',
|
||||||
total: 'total'
|
total: 'total',
|
||||||
},
|
},
|
||||||
showActiveMsg: true,
|
showActiveMsg: true,
|
||||||
showResponseMsg: false,
|
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 的全局配置,比如自定义格式化
|
// 这里可以自行扩展 vxe-table 的全局配置,比如自定义格式化
|
||||||
// vxeUI.formats.add
|
// vxeUI.formats.add
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,11 @@ export const columns: VxeGridProps['columns'] = [
|
||||||
{ field: 'code', title: '岗位编码' },
|
{ field: 'code', title: '岗位编码' },
|
||||||
{ field: 'sort', title: '岗位顺序' },
|
{ field: 'sort', title: '岗位顺序' },
|
||||||
{ field: 'remark', title: '岗位备注' },
|
{ field: 'remark', title: '岗位备注' },
|
||||||
{ field: 'status', title: '状态' },
|
{
|
||||||
|
field: 'status',
|
||||||
|
title: '状态',
|
||||||
|
cellRender: { name: 'CellDict', props: { type: 'common_status' } },
|
||||||
|
},
|
||||||
{ field: 'createTime', formatter: 'formatDateTime', title: '创建时间' },
|
{ field: 'createTime', formatter: 'formatDateTime', title: '创建时间' },
|
||||||
{
|
{
|
||||||
field: 'action',
|
field: 'action',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue