Vue 表格合并单元格后，如何去除多余数据？

vue 原生table合并单元格，如何去除多余数据？

在使用原生table合并单元格的时候，可能会遇到超出合并范围的数据后移的问题。以如下数据为例：

data_list:  [
            {
                question_code: "63",
                module_id: "20",
                module_name: "务效做例离场",
                sub_tool_code: "51",
                content_code: "97",
                question_type: 90,
                merge_number:1,
                item_attr: 42,
                item_attr_name: '普通题目',
                opr_date: "1982-10-09"
            },
             {
                question_code: "63",
                module_id: "20",
                module_name: "务效做例离场",
                sub_tool_code: "51",
                content_code: "97",
                question_type: 90,
                merge_number:1,
                item_attr: 42,
                item_attr_name: '普通题目2',
                opr_date: "1982-10-09"
            },
            {
                question_code: "63",
                module_id: "20",
                module_name: "务效做例离场",
                sub_tool_code: "51",
                content_code: "97",
                question_type: 90,
                merge_number:2,
                item_attr: 42,
                item_attr_name: '普通题目',
                opr_date: "1982-10-09"
            },
            {
                question_code: "63",
                module_id: "20",
                module_name: "务效做例离场",
                sub_tool_code: "51",
                content_code: "97",
                question_type: 90,
                merge_number:2,
                item_attr: 42,
                item_attr_name: '普通题目',
                opr_date: "1982-10-09"
            }
        ]

想要将merge_number大于2的单元格合并，并将item_attr_name数据显示在合并后的单元格中。然而，目前表格中的数据出现了后移问题，需要去除多余的数据。

解决方案如下：

1. 对数据进行处理

   立即学习“前端免费学习笔记（深入）”；

   

   Moshi Chat

   法国AI实验室Kyutai推出的端到端实时多模态AI语音模型，具备听、说、看的能力，不仅可以实时收听，还能进行自然对话。

   下载

   为了处理合并单元格，我们需要创建一个merge变量来跟踪要合并的行数。然后，我们可以遍历数据，为每个行设置merge_number。如果merge_number大于1，则递减merge。如果merge大于0，则忽略该行。

   使用JavaScript代码，可以在Vue之外进行处理：

   // 假设 data 是题中提供的数据
   import { data } from "./data.js";
   
   const data_list = ((data) => {
     let merge = 0;
     data.forEach((row) => {
       if (merge > 0) {
         row.merge_number = 0;
       } else {
         merge = row.merge_number;
       }
       merge--;
     });
     return data;
   })(data);

2. 在Vue中渲染

   在Vue中，我们需要判断merge_number是否大于0，如果不大于0，则不渲染对应的单元格。

   <template v-if="item.merge_number > 0">
     <td :rowspan="item.merge_number">{{ item.item_attr }}</td>
     <td :rowspan="item.merge_number">{{ item.operate_time }}</td>
   </template>

这样处理后，多余的数据将被隐藏，合并单元格也会按预期显示。