Vue 原生 table 合并单元格时如何隐藏多余数据?
vue 原生table合并单元格时,如何隐藏多余数据?
在 Vue 的原生 table 中,当 merge_number 大于 2 时需要合并单元格,但合并后会出现表格中数据向后移动的问题。以下是一种解决该问题的方案:
首先,对数据进行处理,将 merge_number 设置为 0 表示不需要合并,大于 1 表示需要合并。处理逻辑如下:
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 中,需要判断 merge_number 是否等于 0,如果不等于 0,则不渲染对应的 td:
<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>