element -table,多行或列合并

  • 需求:后端返回的表格数据,如果某列值一样,前端表格样式需要合并他们,需要合并的列的行数未知(所以需要有数据后遍历后端数据对需要合并的属性进行计数)即动态遍历表格合并

  • 效果

    -

  • 重点方法;table自带的:span-method="objectSpanMethod"方法

  • 代码环境:vue2 ,element

  • 代码

    js 复制代码
    // tempalte 里
    <el-table
          :data="tableData"
          style="width: 100%"
          :span-method="objectSpanMethod"
        >
    	  <el-table-column prop="Name" label="名称" align="center"></el-table-column>  
          <el-table-column prop="Level" label="等级" align="center" ></el-table-column>  
    	  <el-table-column prop="currenttime" label="时间" align="center" ></el-table-column>  
    </el-table>
    js 复制代码
    // script
    data(){
    	return{
    		tableData:[
    		{
              Name: 'AAA',
              Level: '1',
              currenttime: '2024-1-29',
            },
            {
              Name: 'AAA',
              Level: '2',
              currenttime: '2024-1-29',
            },
           {
              Name: 'AAA',
              Level: '2',
              currenttime: '2024-1-29',
            },
            {
              Name: 'CCC',
              Level: '2',
              currenttime: '2024-1-29',
            },
          ],
    
    	}
    },
    
    method:{
     // 表格合并列
        objectSpanMethod({ row, column, rowIndex, columnIndex }){
          // 判断第一列的行合并
          if (columnIndex === 0 ) {
              const _row = this.getSpanArr(this.tableData,'Name')[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                  rowspan: _row,
                  colspan: _col
              }
          }
    
          // 判断第二列的行合并
          if (columnIndex === 1 ) {
              const _row = this.getSpanArr(this.tableData,'Level','Name')[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                  rowspan: _row,
                  colspan: _col
              }
          }
    
        },
        // 计算合并行数
        getSpanArr(data,key,faKey) {
          /**
           * data 表身数据
           * key当前需要合并的属性名称
           * faKey :如果有多列属性需要行合并,此时需要判断第二个属性需不需再第一个属性相同的条件下才合并,不需要就不用传,需要就穿第一个属性名
           * 
           */
           
          // 遍历数据
          let spanArr=[]
          let pos = 0
          for (let i = 0; i < data.length; i++) {
              // 如果是第一个数据,就将列表spanArr添加一个1,表示暂时只有一个名字相同的、且将索引pos赋值为0
              if (i === 0) {
                  spanArr.push(1);
                  pos = 0
              } else {
                  // 判断当前元素与上一个元素是否相同(且只有同faKey 下的第二列才能合并,不同faKey 下的第二列重新计数,如果不需要这样判断,就去除&&后面的判断)
                 
                  if (data[i][key] === data[i - 1][key] && data[i][faKey] === data[i - 1][faKey] ) {
                      // 如果相同就将索引为 pos 的值加一
                      spanArr[pos] += 1;
                      // 且将数组添加 0 
                      spanArr.push(0);
                  } else {
                      // 如果元素不同了,就可以通过索引为 pos 的值知晓应该需要合并的行数
                      // 同时,我们再次添加一个值1,表示重新开始判断重复姓名的次数
                      spanArr.push(1);
                      // 同时 索引加一
                      pos = i;
                  }
              }
          }
          console.log("索引数组:")
          console.log(spanArr,key)
          return spanArr
        },
    
    }
相关推荐
顽疲9 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好42 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享43 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript