Vue按列值拆分表格：将同一Code数据分到独立表格

要实现按Code字段拆分数据为多个独立表格，核心思路是先一次性获取所有数据，按Code分组后，再为每个分组渲染单独的表格组件。以下是具体的修改步骤和代码示例：

1. 修改模板结构 #

移除原来的单个表格，改为循环渲染每个Code分组对应的表格，并添加分组标题区分：

<template>
  <div class="panel-con">
    <!-- 循环遍历每个Code分组 -->
    <div v-for="(groupData, code) in groupedData" :key="code" class="code-table-group">
      <!-- 显示当前分组的Code标题 -->
      <h3>Code {{ code }}</h3>
      <!-- 为每个分组渲染独立表格 -->
      <ui-basic-table 
        :columns="table.columns" 
        :data="groupData" 
        :loadOnMount="false" 
        :store="table.store" 
      >
      </ui-basic-table>
    </div>
  </div>
</template>

2. 调整脚本逻辑 #

需要手动获取所有数据，然后按Code字段进行分组：

<script setup>
import { ref, onMounted, computed } from 'vue';

// 保留原有的表格配置（列定义、store等）
const table = ref({
  store: /* 你的store实例 */,
  apiUrl: '你的数据接口地址',
  dataKey: '接口返回的数据字段名',
  columns: /* 你的列配置数组 */
});

// 存储原始的所有数据
const rawData = ref([]);

// 组件挂载时一次性获取所有数据
onMounted(async () => {
  try {
    const response = await fetch(table.value.apiUrl);
    const resData = await response.json();
    // 根据dataKey提取数据，若接口直接返回数组则可简化为rawData.value = resData
    rawData.value = resData[table.value.dataKey] || resData;
  } catch (err) {
    console.error('数据获取失败:', err);
  }
});

// 计算属性：按Code字段分组数据
const groupedData = computed(() => {
  return rawData.value.reduce((acc, item) => {
    const code = item.Code;
    // 若当前Code分组不存在则初始化
    if (!acc[code]) {
      acc[code] = [];
    }
    acc[code].push(item);
    return acc;
  }, {});
});
</script>

3. 添加样式优化（可选） #

为了让各个分组表格更清晰，可添加一些样式分隔：

<style scoped>
.code-table-group {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.code-table-group h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #374151;
}
</style>

关键说明 #

• 禁用了表格的loadOnMount属性，避免每个表格都去请求接口，改为统一在父组件获取数据后分发。
• 使用reduce方法将原始数据按Code字段分组，得到一个以Code为键、对应数据数组为值的对象。
• 通过v-for遍历分组后的对象，为每个Code渲染独立的表格组件，并传入对应的数据子集。

内容的提问来源于stack exchange，提问作者user6632933