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 = true
try {
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"
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>
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 = true
try {
const res = await api.getFeeList()
if (res.code === 200) {
const { columns, result } = processTableData(res.data)
tableColumns.value = columns
tableListShow.value = result
tableList.value = res.data // 保留原始数据用于后续操作
}
} finally {
loading.value = false
}
}
onMounted(async () => {
await getList()
})
</script>
更多推荐

所有评论(0)