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，则忽略该行。
使用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，则不渲染对应的单元格。
0"> {{ item.item_attr }} {{ item.operate_time }}
登录后复制
这样处理后，多余的数据将被隐藏，合并单元格也会按预期显示。
以上就是Vue 表格合并单元格后，如何去除多余数据？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2804030.html
