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

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

解决方案如下:

  1. 对数据进行处理

    为了处理合并单元格,我们需要创建一个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);
  2. 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 表格合并单元格后,如何去除多余数据?的详细内容,更多请关注其它相关文章!