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,则忽略该行。
使用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 表格合并单元格后,如何去除多余数据?的详细内容,更多请关注其它相关文章!