Vue3 Antdv 表格分组合并指定列

最新推荐文章于 2024-04-05 15:26:59 发布
最新推荐文章于 2024-04-05 15:26:59 发布
阅读量720 收藏 1
点赞数
分类专栏： vue antdv 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39085895/article/details/131068574
版权
vue 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
antdv
1 篇文章 0 订阅
订阅专栏

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

主要方法

// 添加合并标识
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，至此才可以完成指定列的分组合并。

伍什kay
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现数据表格合并列rowspan效果
10-16
主要为大家详细介绍了Vue实现数据表格合并列rowspan效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue Elenent实现表格相同数据列合并
01-22
本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下 作者：秋名 思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。（同一个表格，但是每一行，固定一列的数据都相同，即可使用合并单元格，做到了既美观，也清晰。） template： <el span-method=objectSpanMethod4> Js: data(){ return{ orderdata:null,// 后端将数据查询出来后，绑定到orderdata里
antd table 合并相邻相同单元格数据
MFWSCQ的博客
03-31 1312
表头只支持列合
Ant Design Vue 表格合并和折叠展开的一种方法
最新发布
weixin_44236061的博客
04-05 374
antd表格行合并和行展开折叠结合的一种方法
vue3的antd合并表格
hujgg的博客
05-26 680
const data = [ { key: '1', name: 'John Brown', age: 32, tel: '0571-22098909', phone: 18889898989, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', tel: '0571-22098333', phone: 188898988...
Antd-Vue中Table组件实现相同内容列合并
returndbf的博客
02-02 620
方法适用于Antd以及Antd-Vue，可能同样适用于ElementUi
vue3使用antd组件库a-table表格组件实现合并单元格。
wwwbaidusss的博客
06-15 1384
vue3使用antd组件库a-table表格组件实现合并单元格。
antdvue-Table首列合并
qq_45432996的博客
05-15 3097
antdvue table首列合并
Ant design vue 表格合并 合并行 合并列
qq_51622532的博客
06-24 8296
Ant design vue 合并单元格 合并行， 合并列
vue3 antdv table表格合并单元格
qq_44792224的博客
07-12 515
【代码】vue3 antdv table表格合并单元格。
React antd Table 实现单元格点击 表头斜线分组等功能
localhost
11-22 4816
react antd 单元格添加点击事件 自定义单元格
vue表格实现固定表头首列
11-02
vue移动端项目 一个可以固定表头首列的表格 ，没有使用UI插件。 感兴趣的朋友可以参考下，希望对大家有所帮助
解决vue 表格table列求和的问题
10-16
今天小编就为大家分享一篇解决vue 表格table列求和的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用render函数渲染table表格某一列的数组数据
yingfengxuewu的博客
10-25 1万+
vue使用render函数渲染table表格某一列的数组数据 当所需要渲染的表格数据是一个数组类型的数据时，可以使用render函数，如下所示： 1.先在需要显示的表头中写出关键字 &lt;Table :columns="columns1" :data="currentUserList"&gt;&lt;/Table&gt; 2.js文件中 return { columns1: [ ...
vue3对antdesign中多行表格的数据进行计算、合并展示
CherishTaoTao的博客
11-23 930
vue3中对antdesign表格中的不同列进行属性计算。利用customRender的属性。
Antd表格之行/列合并
热门推荐
cc_百川
03-05 2万+
Antd--表格之行/列合并 注意：antd官方行/列合并参考：https://1x.ant.design/components/table/#components-table-demo-colspan-rowspan 表格行/列合并 表头只支持列合并，使用 column 里的 colSpan 进行设置。 表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpa...
vue3、Ant Design Vue表格组件单元格行合并
qq_42657934的博客
01-09 790
表格相邻行一样进行合并
vue3+antdesign 完成嵌套表格的复选框联动
weixin_50249353的博客
09-20 690
【代码】vue3+antdesign 完成嵌套表格的复选框联动。
antDesign vue 实现表格单元格合并
li18612818469的博客
09-06 2771
antDesign 配合 vue, 实现 a-table 单元格动态合并
vue3antdv表格字符串按照\n换行
09-06
在使用vue3antdv表格进行展示时，当字符串中存在"\n"的时候，可以通过以下步骤实现按照换行符进行换行的效果。 首先，在表格的列定义中，将需要展示换行效果的列的render函数进行特殊处理。例如，可以使用vue的指令v-html来将字符串中的"\n"转换为"<br/>"标签，实现换行效果。 其次，定义一个全局的filter过滤器，用于对字符串进行预处理。在该过滤器中，使用正则表达式将"\n"替换为"<br/>"，然后返回新的字符串。 接着，在表格列的定义中，对需要展示换行效果的列使用该filter过滤器。 最后，经过上述步骤处理后，将原本包含"\n"的字符串在表格中展示时就会按照换行符进行换行。 以下是具体的代码实现示例： // 在Vue的全局定义中，定义一个过滤器 Vue.filter('lineBreakFilter', function(value) { return value.replace(/\n/g, '<br/>'); }); // 表格列的定义 columns: [ { title: '内容', dataIndex: 'content', key: 'content', width: 200, // 使用v-html指令将字符串进行渲染 render: (text) => { return h('div', { domProps: { innerHTML: text } }); }, // 对内容进行过滤处理 slots: { customRender: 'content' }, }, ], 通过以上步骤，就能够实现在vue3antdv表格中对字符串按照"\n"进行换行的效果。注意，使用这种方式要确保字符串中的"\n"是完整的格式，即"\n"之间没有空格或其他字符。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值