vue table 自定义处理 key 作为 表头

   数据格式：有不同的key 对应不同数组

解决方式：重新渲染一遍数据

<template><div class="bg"><el-table :data="tableListShow" border ref="table" :cell-style="{ 'text-align': 'center' }" :header-cell-style="{background: '#5f697d',color: '#fff',height: '10px','text-align': 'center'}" stripe v-loading="loading"><el-table-column v-for="(column, index) in tableColumns" :key="index" :label="column.label":prop="column.prop"><template #default="scope">{{ scope.row[column.prop] }}</template></el-table-column></el-table></div>
</template>
<script setup>
const loading = ref(false)
const tableList = ref([]) // 原始数据
const tableColumns = computed(() => {  // 重新渲染表头const columns = [];for (const key in tableList.value) {const firstItem = tableList.value[key][0];if (firstItem) {const gradeNoLabel = showCustomValue(grandeNoList.value, firstItem.GRADE_NO);columns.push({ label: `${t('delivery_fee.weight_table')}`, prop: `${key}_WT_WTNM` });columns.push({ label: gradeNoLabel, prop: `${key}_MNY` });}}return columns;
});const tableListShow = computed(() => {  // 重新渲染数据const result = [];let maxLength = 0;for (const key in tableList.value) {maxLength = Math.max(maxLength, tableList.value[key].length);}for (let i = 0; i < maxLength; i++) {const row = {};for (const key in tableList.value) {const item = tableList.value[key][i];if (item) {row[`${key}_WT_WTNM`] = `${formatAmount(item.WT)} ${item.WT_NM}`;row[`${key}_MNY`] = `￦${formatAmount(item.MNY)}`;} else {row[`${key}_WT_WTNM`] = "-";row[`${key}_MNY`] = "-";}}result.push(row);}return result;
});const getList = async () => {loading.value = truetry {await api.getFeeList().then(res => {if (res.code === 200) {tableList.value = JSON.parse(JSON.stringify(res?.data));}})} finally {loading.value = false}
}onMounted(async () => {await getList();});</script>

planB:

<template><div class="bg"><el-table:data="tableListShow"borderref="table":cell-style="{ 'text-align': 'center' }":header-cell-style="{background: '#5f697d',color: '#fff',height: '10px','text-align': 'center'}"stripev-loading="loading"><el-table-columnv-for="(column, index) in tableColumns":key="index":label="column.label":prop="column.prop"><template #default="scope">{{ scope.row[column.prop] }}</template></el-table-column></el-table></div>
</template><script setup>
import { ref, onMounted, computed } from 'vue'
import { formatAmount } from '@/utils/format'const loading = ref(false)
const tableList = ref({}) // 原始数据
const tableColumns = ref([]) // 表头
const tableListShow = ref([]) // 展示数据// 提取并扁平化数据
const processTableData = (rawData) => {const columns = []const result = []let maxLength = 0// 第一次遍历：构建表头 + 找最大长度for (const key in rawData) {const list = rawData[key]if (list.length > 0) {maxLength = Math.max(maxLength, list.length)const gradeNoLabel = showCustomValue(grandeNoList.value, list[0].GRADE_NO)columns.push({ label: `${t('delivery_fee.weight_table')}`, prop: `${key}_WT_WTNM` })columns.push({ label: gradeNoLabel, prop: `${key}_MNY` })}}// 第二次遍历：构建展示数据for (let i = 0; i < maxLength; i++) {const row = {}for (const key in rawData) {const item = rawData[key][i]if (item) {row[`${key}_WT_WTNM`] = `${formatAmount(item.WT)} ${item.WT_NM}`row[`${key}_MNY`] = `￦${formatAmount(item.MNY)}`} else {row[`${key}_WT_WTNM`] = '-'row[`${key}_MNY`] = '-'}}result.push(row)}return { columns, result }
}const getList = async () => {loading.value = truetry {const res = await api.getFeeList()if (res.code === 200) {const { columns, result } = processTableData(res.data)tableColumns.value = columnstableListShow.value = resulttableList.value = res.data // 保留原始数据用于后续操作}} finally {loading.value = false}
}onMounted(async () => {await getList()
})
</script>