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
        },
    
    }
相关推荐
浪裡遊几秒前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术8 分钟前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理12 分钟前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing13 分钟前
0704-0706上海,又聚上了
前端·新浪微博
止观止36 分钟前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall37 分钟前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴42 分钟前
简单入门Python装饰器
前端·python
袁煦丞1 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码2 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
Liudef062 小时前
2048小游戏实现
javascript·css·css3