数据格式:有不同的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>

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐