|
|
@@ -11,7 +11,7 @@
|
|
|
<template v-for="(item, n) in items" :key="n">
|
|
|
<th :style="labelStyle">
|
|
|
<slot :name="item.prop + 'Label'">
|
|
|
- {{ item.label }}
|
|
|
+ {{ item.formatLabel ? item.formatLabel(data[item.prop]) : item.label }}
|
|
|
</slot>
|
|
|
</th>
|
|
|
<td :colspan="(items.length - 1) === n ? (column * 2 - items.length * 2) + 1 : 1"
|
|
|
@@ -30,14 +30,7 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { PropType, computed } from 'vue'
|
|
|
import { handleNoneValue } from '@/filters'
|
|
|
-
|
|
|
-interface cellProp {
|
|
|
- prop: string;
|
|
|
- label: string;
|
|
|
- decimal?: number; // 保留小数点位数
|
|
|
- entireRow?: boolean; // 是否整行显示
|
|
|
- hideEmpty?: boolean; // 是否隐藏空值
|
|
|
-}
|
|
|
+import { CellProp } from './types'
|
|
|
|
|
|
const props = defineProps({
|
|
|
title: String,
|
|
|
@@ -46,7 +39,7 @@ const props = defineProps({
|
|
|
default: () => ({})
|
|
|
},
|
|
|
cellProps: {
|
|
|
- type: Array as PropType<cellProp[]>,
|
|
|
+ type: Array as PropType<CellProp[]>,
|
|
|
required: true
|
|
|
},
|
|
|
column: {
|
|
|
@@ -87,20 +80,22 @@ const cellGroup = computed(() => {
|
|
|
// const rows = props.cellProps.slice(index, index += props.column)
|
|
|
// result.push(rows)
|
|
|
// }
|
|
|
- return props.cellProps.reduce((pre, cur) => {
|
|
|
- const rows = pre[pre.length - 1] // 获取上一组元素
|
|
|
- if (rows) {
|
|
|
- const cell = rows[rows.length - 1] // 获取最后一个元素
|
|
|
- if (cell.entireRow || cur.entireRow || rows.length === props.column) {
|
|
|
- pre[pre.length] = [cur]
|
|
|
+ return props.cellProps.reduce<CellProp[][]>((pre, cur) => {
|
|
|
+ if (cur.show === undefined || cur.show) {
|
|
|
+ const rows = pre[pre.length - 1] // 获取上一组元素
|
|
|
+ if (rows) {
|
|
|
+ const cell = rows[rows.length - 1] // 获取最后一个元素
|
|
|
+ if (cell.entireRow || cur.entireRow || rows.length === props.column) {
|
|
|
+ pre[pre.length] = [cur]
|
|
|
+ } else {
|
|
|
+ rows.push(cur)
|
|
|
+ }
|
|
|
} else {
|
|
|
- rows.push(cur)
|
|
|
+ pre[0] = [cur]
|
|
|
}
|
|
|
- } else {
|
|
|
- pre[0] = [cur]
|
|
|
}
|
|
|
return pre
|
|
|
- }, [] as cellProp[][])
|
|
|
+ }, [])
|
|
|
})
|
|
|
|
|
|
const fieldsetStyle = computed(() => props.title ? {} : {
|
|
|
@@ -123,12 +118,15 @@ const labelStyle = computed(() => ({
|
|
|
...valueStyle.value
|
|
|
}))
|
|
|
|
|
|
-const handleValue = (cell: cellProp) => {
|
|
|
+const handleValue = (cell: CellProp) => {
|
|
|
const value = props.data[cell.prop]
|
|
|
- if (Number.isFinite(value) && cell.decimal) {
|
|
|
- return value.toFixed(cell.decimal)
|
|
|
+ const formattedValue = cell.formatValue ? cell.formatValue(value) : value
|
|
|
+
|
|
|
+ if (Number.isFinite(formattedValue) && cell.decimal) {
|
|
|
+ return formattedValue.toFixed(cell.decimal)
|
|
|
}
|
|
|
- return handleNoneValue(value)
|
|
|
+
|
|
|
+ return handleNoneValue(formattedValue)
|
|
|
}
|
|
|
</script>
|
|
|
|