| | |
| | | }); |
| | | |
| | | // 表格配置项可以用 cellRender: { name: 'CellTag' }, |
| | | // props: { data: [{value, color}], labels?: {[value]: label} } |
| | | // 支持两种匹配模式: |
| | | // 1. 精确匹配: data 和 labels 中都是精确值 (状态/类型枚举) |
| | | // 2. 阈值匹配: data 为降序阈值, label 显示原始数值 (评分) |
| | | vxeUI.renderer.add('CellTag', { |
| | | renderTableDefault(renderOpts, params) { |
| | | const { props } = renderOpts; |
| | | const { column, row } = params; |
| | | return h(Tag, { color: props?.color }, () => row[column.field]); |
| | | const rawValue = row[column.field]; |
| | | |
| | | // 查找显示文本 |
| | | let label = rawValue; |
| | | if (props?.labels && rawValue !== undefined && rawValue !== null) { |
| | | label = props.labels[rawValue] ?? rawValue; |
| | | } |
| | | |
| | | // 查找颜色: 优先精确匹配,否则阈值匹配 |
| | | let color: string | undefined; |
| | | if (props?.data) { |
| | | const exact = props.data.find( |
| | | (item: any) => item.value === rawValue, |
| | | ); |
| | | if (exact) { |
| | | color = exact.color; |
| | | } else { |
| | | const sorted = [...props.data] |
| | | .filter((item: any) => typeof item.value === 'number') |
| | | .sort((a: any, b: any) => b.value - a.value); |
| | | const threshold = sorted.find( |
| | | (item: any) => Number(rawValue) >= item.value, |
| | | ); |
| | | if (threshold) color = threshold.color; |
| | | } |
| | | } |
| | | |
| | | return h(Tag, { color }, () => label); |
| | | }, |
| | | }); |
| | | |