Bootstrap

Vue3 Antdv 表格分组合并指定列

项目特殊需求：依照数据中的分组标签以及指定的列进行数据分组合并。

主要方法

// 添加合并标识
const dataMerge = (data: Array<any>) => {
  for (let i = 0; i < data.length; i++) {
    const mark = data[i]["group"];
    if (data[i - 1] && data[i - 1]["group"] === mark) {
      data[i].merge = 0;
    } else {
      let no = 0;
      for (let j = i; j < data.length; j++) {
        if (data[j]["group"] === mark) {
          no++;
        } else {
          break;
        }
      }
      data[i].merge = no;
    }
  }
  return data;
};

template 结构

<template>
  <a-table :columns="columns" :data-source="tableData" :pagination="false"></a-table>
</template>

JS部分

import { onMounted, ref } from "vue";

const response = [
  {
    id: 1,
    code: "bk9995732",
    desc: "孔用挡圈 65Mn 150 氧化 GB 893.2-1986",
    code_4: "J010010014686",
    desc_5: "孔用挡圈 GB 893.2-1986 65Mn 150 氧化",
    group: 1,
    similar: "极度相似",
  },
  {
    id: 2,
    code: "bk9995732",
    desc: "孔用挡圈 65Mn 150 氧化 GB 893.2-1986",
    code_4: "J010010015995",
    desc_5: "孔用挡圈 GB 893.2-1986 65Mn 105 氧化",
    group: 1,
    similar: "极度相似",
  },
  {
    id: 3,
    code: "bk9995732",
    desc: "孔用挡圈 65Mn 150 氧化 GB 893.2-1986",
    code_4: "J010010014315",
    desc_5: "孔用挡圈 GB 893.2-1986 65Mn 50 氧化",
    group: 1,
    similar: "极度相似",
  },
  {
    id: 4,
    code: "bk9995732",
    desc: "孔用挡圈 65Mn 150 氧化 GB 893.2-1986",
    code_4: "J010010012333",
    desc_5: "孔用挡圈 GB 893.1-1986 65Mn 20 氧化",
    group: 1,
    similar: "极度相似",
  },
  {
    id: 5,
    code: "bk9995732",
    desc: "孔用挡圈 65Mn 150 氧化 GB 893.2-1986",
    code_4: "J010010012360",
    desc_5: "孔用挡圈 GB 893.1-1986 65Mn 102 氧化",
    group: 1,
    similar: "高度相似",
  },
  {
    id: 6,
    code: "bk9179777",
    desc: "孔用挡圈 65Mn 150 氧化 GB893.2",
    code_4: "J010010014315",
    desc_5: "孔用挡圈 GB 893.2-1986 65Mn 50 氧化",
    group: 2,
    similar: "高度相似",
  },
  {
    id: 7,
    code: "bk9179777",
    desc: "孔用挡圈 65Mn 150 氧化 GB893.2",
    code_4: "J010010015995",
    desc_5: "孔用挡圈 GB 893.2-1986 65Mn 105 氧化",
    group: 2,
    similar: "高度相似",
  },
  {
    id: 8,
    code: "bk9179777",
    desc: "孔用挡圈 65Mn 150 氧化 GB893.2",
    code_4: "J010010014686",
    desc_5: "孔用挡圈 GB 893.2-1986 65Mn 150 氧化",
    group: 2,
    similar: "高度相似",
  },
  {
    id: 9,
    code: "bk9179777",
    desc: "孔用挡圈 65Mn 150 氧化 GB893.2",
    code_4: "J010010012333",
    desc_5: "孔用挡圈 GB 893.1-1986 65Mn 20 氧化",
    group: 2,
    similar: "高度相似",
  },
  {
    id: 10,
    code: "bk9179777",
    desc: "孔用挡圈 65Mn 150 氧化 GB893.2",
    code_4: "J010010015048",
    desc_5: "孔用挡圈 GB 893.2-1986 65Mn 20 氧化",
    group: 2,
    similar: "高度相似",
  },
  {
    id: 11,
    code: "bk7823496",
    desc: "平垫圈 钢 6 镀锌钝化 100HV GB/T 95-2002",
    code_4: "M010020027383",
    desc_5: "平垫圈 GB/T 95-2002 钢 6 镀锌钝化 100HV",
    group: 3,
    similar: "极度相似",
  },
  {
    id: 12,
    code: "bk7823496",
    desc: "平垫圈 钢 6 镀锌钝化 100HV GB/T 95-2002",
    code_4: "M010020024181",
    desc_5: "平垫圈 GB/T 96.2-2002 钢 5 镀锌钝化 100HV",
    group: 3,
    similar: "极度相似",
  },
  {
    id: 13,
    code: "bk7823496",
    desc: "平垫圈 钢 6 镀锌钝化 100HV GB/T 95-2002",
    code_4: "M010020026508",
    desc_5: "平垫圈 GB/T 95-2002 钢 16 镀锌钝化 100HV",
    group: 3,
    similar: "极度相似",
  },
  {
    id: 14,
    code: "bk7823496",
    desc: "平垫圈 钢 6 镀锌钝化 100HV GB/T 95-2002",
    code_4: "M010020022911",
    desc_5: "平垫圈 GB/T 95-2002 钢 36 镀锌钝化 100HV",
    group: 3,
    similar: "高度相似",
  },
  {
    id: 15,
    code: "bk7823496",
    desc: "平垫圈 钢 6 镀锌钝化 100HV GB/T 95-2002",
    code_4: "M010020026332",
    desc_5: "平垫圈 GB/T 96.2-2002 钢 3.5 镀锌钝化 100HV",
    group: 3,
    similar: "高度相似",
  },
  {
    id: 16,
    code: "bk3283650",
    desc: "平垫圈 GB95-2002 钢 6 镀锌钝化 100HV",
    code_4: "M010020027383",
    desc_5: "平垫圈 GB/T 95-2002 钢 6 镀锌钝化 100HV",
    group: 4,
    similar: "高度相似",
  },
  {
    id: 17,
    code: "bk3283650",
    desc: "平垫圈 GB95-2002 钢 6 镀锌钝化 100HV",
    code_4: "M010020024181",
    desc_5: "平垫圈 GB/T 96.2-2002 钢 5 镀锌钝化 100HV",
    group: 4,
    similar: "高度相似",
  },
  {
    id: 18,
    code: "bk3283650",
    desc: "平垫圈 GB95-2002 钢 6 镀锌钝化 100HV",
    code_4: "M010020026508",
    desc_5: "平垫圈 GB/T 95-2002 钢 16 镀锌钝化 100HV",
    group: 4,
    similar: "高度相似",
  },
  {
    id: 19,
    code: "bk3283650",
    desc: "平垫圈 GB95-2002 钢 6 镀锌钝化 100HV",
    code_4: "M010020022911",
    desc_5: "平垫圈 GB/T 95-2002 钢 36 镀锌钝化 100HV",
    group: 4,
    similar: "中度相似",
  },
  {
    id: 20,
    code: "bk3283650",
    desc: "平垫圈 GB95-2002 钢 6 镀锌钝化 100HV",
    code_4: "M010020026332",
    desc_5: "平垫圈 GB/T 96.2-2002 钢 3.5 镀锌钝化 100HV",
    group: 4,
    similar: "中度相似",
  },
];

// 合并行
const dataMerge = (data: Array<any>) => {
  for (let i = 0; i < data.length; i++) {
    const mark = data[i]["group"];
    if (data[i - 1] && data[i - 1]["group"] === mark) {
      data[i].merge = 0;
    } else {
      let no = 0;
      for (let j = i; j < data.length; j++) {
        if (data[j]["group"] === mark) {
          no++;
        } else {
          break;
        }
      }
      data[i].merge = no;
    }
  }
  return data;
};

const tableData = ref<any[]>([]);

const columns = ref<any[]>([
  {
    title: "id",
    dataIndex: "id",
    width: 100,
  },
  {
    title: "编码",
    dataIndex: "code",
    width: 100,
  },
  {
    title: "描述",
    dataIndex: "desc",
    width: 100,
  },
  {
    title: "编码_4",
    dataIndex: "code_4",
    width: 100,
  },
  {
    title: "描述_5",
    dataIndex: "desc_5",
    width: 100,
  },
  {
    title: "同组标签",
    dataIndex: "group",
    width: 100,
  },
  {
    title: "相似度",
    dataIndex: "similar",
    width: 100,
  },
]);
// 需合并的列
const mergeCol = ["code_4", "desc_5"];

const sharedOnCell = (record: any, _index: number): any => {
  return { rowSpan: record.merge };
};

onMounted(() => {
  const newData = dataMerge(response);
  let newColumns = columns.value.map((item) => {
    item.customCell = mergeCol.includes(item.dataIndex) ? sharedOnCell : null;
    return item;
  });
  columns.value = newColumns;
  tableData.value = newData;
});

效果图
在这里插入图片描述
分组逻辑
数据中group值相同的视为一组，dataMerge方法为每一行添加merge属性，同组内首行的merge属性为这一组的长度，也就是要合并的行数，组内其他数据行内的merge属性都将值设置为0，至此才可以完成指定列的分组合并。

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
【2024】springboot校服订购系统设计与实现
android studio/IntelliJ IDEA SVN无法正常使用问题
软件工程-数据字典
【二十六】springboot整合jedis和redisson布隆过滤器处理缓存穿透
鸿蒙app开发小知识：开发工具的API显示设置
工作纪实40-使用redis的几种姿势
fpga之vivado 调试千兆以太网出现的误码情况思考
提升 C++ std::string 操作效率：善用 pop_back()
文件上传漏洞
Tensorflow-0-带GPU支持的安装与校验
;