Vue 表格合并单元格后，如何去除多余数据？-html教程-PHP中文网

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

碧海醫心

发布： 2024-11-08 08:06:42

原创

465人浏览过

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数据显示在合并后的单元格中。然而，目前表格中的数据出现了后移问题，需要去除多余的数据。

解决方案如下：

对数据进行处理

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

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

飞书多维表格
表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

使用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);
```
登录后复制

在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>

登录后复制

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

以上就是Vue 表格合并单元格后，如何去除多余数据？的详细内容，更多请关注php中文网其它相关文章！