VUE根据原生方式进行Table单元格合并

最新推荐文章于 2024-05-16 12:43:50 发布

weijianpeng18421

最新推荐文章于 2024-05-16 12:43:50 发布

阅读量252

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weijianpeng18421/article/details/135926819

版权

文章描述了一个使用JavaScript编写的函数listHandle，它用于合并具有相同名称的表格数据行，并计算每个名称出现的次数。通过示例数据展示了处理前后数据的变化。

摘要由CSDN通过智能技术生成

表格（根据名称合并，要根据其他的合并只需照着名称的td写就行了）

<table border="1" style="width: 100%;border-collapse: collapse;">
  <thead>
  <tr>
    <th>名称</th>
    <th>年份</th>
    <th>月份</th>
    <th>日期</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="item in dataList">
    <td :rowspan="item.nameCount" v-if="item.nameShow">{{ item.name}}</td>
    <td colspan="1" rowspan="1">{{ item.year}}</td>
    <td colspan="1" rowspan="1">{{ item.month}}</td>
    <td colspan="1" rowspan="1">{{ item.date}}</td>
  </tr>
  </tbody>
</table>

处理数据的逻辑

listHandle(list) {
 for (var key in list[0]) {
   var k = 0;
   while (k < list.length) {
     list[k][key + 'Count'] = 1;
     list[k][key + 'Show'] = true;
     for (var i = k + 1; i <= list.length - 1; i++) {
       if (list[k][key] === list[i][key] && list[k][key] !== '') {
         list[k][key + 'Count']++;
         list[k][key + 'Show'] = true;
         list[i][key + 'Count'] = 1;
         list[i][key + 'Show'] = false;
       } else {
         break;
       }
     }
     k = i;
   }
 }
 return list
}

数据举例

[
   {
       name":"测试001",
       year:"2024",
       month:"1",
       date:"30"
   },
   {
       name":"测试001",
       year:"2024",
       month:"1",
       date:"30"
   },
   {
       name":"测试002",
       year:"2024",
       month:"1",
       date:"30"
   },
    {
       name":"测试003",
       year:"2024",
       month:"1",
       date:"30"
   },
    {
       name":"测试003",
       year:"2024",
       month:"1",
       date:"30"
   },
     {
       name":"测试003",
       year:"2024",
       month:"1",
       date:"30"
   },
]

经过listHandle方法处理后的数据

[
   {
       name":"测试001",
       year:"2024",
       month:"1",
       date:"30",
      nameCount:2,
      nameShow:true,
   },
   {
       name":"测试001",
       year:"2024",
       month:"1",
       date:"30",
      nameCount:1,
      nameShow:false,
   },
   {
       name":"测试002",
       year:"2024",
       month:"1",
       date:"30",
      nameCount:1,
      nameShow:true,
   },
    {
       name":"测试003",
       year:"2024",
       month:"1",
       date:"30",
      nameCount:3,
      nameShow:true,
   },
    {
       name":"测试003",
       year:"2024",
       month:"1",
       date:"30",
      nameCount:2,
      nameShow:false,
   },
    {
       name":"测试003",
       year:"2024",
       month:"1",
       date:"30",
      nameCount:1,
      nameShow:false,
   },
]