vue 原生table合并单元格多余数据处理
在使用 vue 构建原生 table 时，有时需要合并单元格。但是，当 merge_number 大于 2 时，多余的数据仍然会显示。这篇文章为您提供了隐藏这些多余数据的解决方案。
问题分析
在提供的示例数据中，merge_number 为 1 和 2 的数据需要合并。然而，当使用 rowspan 将单元格合并后，出现的“普通题目”和“普通题目2”仍然可见。这是因为多余的单元格被“挤”到了后面，导致数据显示混乱。
解决方法
立即学习“前端免费学习笔记（深入）”；
要隐藏多余的数据，需要在渲染之前对数据进行预处理。具体步骤如下：
- 初始化一个变量 merge 为 0，用于记录合并状态。
-
依次遍历数据
- 如果 merge_number 为 1，则将 merge 减 1，使 merge 始终为 0。
- 如果 merge_number 大于 1，则将 merge 减去相同的值，表示需要合并的行数，并且设置 merge_number 为 0，表示该行不需要合并。
-
在 Vue 模板中判断 merge_number 的值
- 如果 merge_number 大于 0，则渲染合并的单元格（使用 rowspan）。
- 如果 merge_number 为 0，则不渲染该单元格。
代码示例
// 数据预处理
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.component('my-table', {
template: `
<table>
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in data_list" :key="index">
<td v-if="item.merge_number > 0" :rowspan="item.merge_number">{{ item.item_attr }}</td>
<td v-if="item.merge_number > 0" :rowspan="item.merge_number">{{ item.operate_time }}</td>
</tr>
</tbody>
</table>
`,
data() {
return {
data_list: data_list
};
}
});通过以上方法，可以有效隐藏原生 table 中合并单元格后的多余数据，使表格信息展示更加清晰美观。
