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
        },
    
    }
相关推荐
朕的剑还未配妥3 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼7 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
渣哥8 分钟前
多环境配置利器:@Profile 在 Spring 项目中的实战价值
javascript·后端·面试
携欢11 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33019 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦19 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
U.2 SSD25 分钟前
Echart仪表盘示例
javascript·echarts
qq_18417767727 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost29 分钟前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
Never_Satisfied34 分钟前
在JavaScript / HTML / Node.js中,post方式的Content-Type属性的text的三种编码
javascript·node.js·html