element-ui el-table表格组件 动态合并列

已于 2023-01-10 14:59:10 修改
阅读量1k 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js elementui javascript
于 2023-01-10 14:45:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43245095/article/details/128629522
版权

效果

codepen 预览地址 合并多个单元格 el-table
在这里插入图片描述

完整 代码

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
  
        <el-table-column
        prop="number"
        label="号码id">
      </el-table-column>
          <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="数值 2（元）">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</template>
</div>

var Main = {
    data() {
      return {
        storeRowObj:{},
        storeProNameObj:{},
        storeHebingObj:{},
        tableData: [{
          id: '1',
          name: '王小虎',
          amount1: '0',
          amount2: '4.1',
          amount3: 15,
          number:123456,
        },{
          id: '1',
          name: '王小虎',
          amount1: '1',
          amount2: '4.1',
          number:123456,
          amount3: 15
        },{
          id: '1',
          name: '王小虎',
          amount1: '2',
          amount2: '4.1',
          amount3: 15,
          number:456,
        },{
          id: '2',
          name: '王小虎',
          amount1: '3',
          amount2: '4.1',
          amount3: 15,
          number:567,
          
        },{
          id: '2',
          name: '王小虎',
          amount1: '4',
          amount2: '4.1',
          number:567,
          amount3: 15
          
        },{
          id: '2',
          name: '王小虎',
          amount1: '5',
          amount2: '4.1',
          amount3: 15,
          number:789,
        },{
          id: '2',
          name: '王小虎',
          amount1: '6',
          amount2: '4.1',
          number:789,
          amount3: 15
        },{
          id: '3',
          name: '王小虎',
          amount1: '7',
          amount2: '4.1',
          number:789,
          amount3: 15
        },{
          id: '3',
          name: '王小虎',
          amount1: '8',
          number:645654465,
          amount2: '4.1',
          amount3: 15
        },{
          id: '3',
          name: '王小虎',
          amount1: '9',
          amount2: '4.1',
          number:567,
          amount3: 15
          
        },{
          id: '3',
          name: '王小虎',
          amount1: '10',
          amount2: '4.1',
          amount3: 15,
          number:789,
        },{
          id: '3',
          name: '王小虎',
          amount1: '11',
          amount2: '4.1',
          number:789,
          amount3: 15
        },{
          id: '3',
          name: '王小虎',
          amount1: '12',
          amount2: '4.1',
          number:789,
          amount3: 15
        },{
          id: '3',
          name: '王小虎',
          amount1: '13',
          number:645654465,
          amount2: '4.1',
          amount3: 15
        },{
          id: '3',
          name: '王小虎',
          amount1: '13',
          number:'',
          amount2: '4.1',
          amount3: 15
        },{
          id: '3',
          name: '王小虎',
          amount1: '13',
          number:'645654465',
          amount2: '6',
          amount3: 15
        },{
          id: '3',
          name: '王小虎',
          amount1: '13',
          number:645654465,
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '3',
          name: '王小虎',
          amount1: '13',
          number:645654465,
          amount2: '4.1',
          amount3: 15
        },
        {
          id: '3',
          name: '王小虎',
          amount1: '13',
          number:645654468,
          amount2: '4.1',
          amount3: 15
        },]
      };
    },
  created(){
    let options = {
      //合并顺序必须 优先级从高往低排列
			hebingProps: [
				{
					proName: 'id',
					columnIndexList: [0]
				},
				{
					proName: 'number',
					columnIndexList: [1,2]
				},
				{
					proName: 'amount2',
					columnIndexList: [4]
				},
				{
					proName: 'amount3',
					columnIndexList: [5]
				}
			]
		};
    this.tableData =  this.disposalData(this.tableData,options)
  }, 
    methods: {
      //  判断是否为空
      isEmpty(value){
        if(String(value)=='0'){
          return true;
        }

        if(!value){
          return false
        }
        return true;
      },
            // 判断上一个 proName 的值 是否相等 
              previousOneProNameValueAllEquality(hebingProps,currentProName,currentItem,storeItem){ 
      
        if(!storeItem){
          return true;
        }
      let previousProName = null;
        for(let i=0;i<hebingProps.length;i++){
          let item = hebingProps[i];
          if(item.proName==currentProName){
            break;
          }
          previousProName = item.proName;
        }
      // console.log(previousProName,currentProName);
      
      if(previousProName){
          let otherProNameList = [previousProName];
          let isEquality = true;
          for(let i=0;i<otherProNameList.length;i++){
            let key = otherProNameList[i];
            if(currentItem[key]!=storeItem[key]){
              isEquality = false;
              break;
            }
          }
          return isEquality;
        }
      return true;
      },
      // 判断之前的proName 是否全部相等 
    previousProNameValueAllEquality(hebingProps,currentProName,currentItem,storeItem){
        if(!storeItem){
          return true;
        }
        let otherProNameList =[];
        let proNameIndex = -1;
        otherProNameList= hebingProps.filter((item,index)=>{
          if(item.proName==currentProName){
            proNameIndex = index;
          }
          if(proNameIndex==-1){
            return true;
          } 
          else if(proNameIndex==0 || index >= proNameIndex){
           return false;
          }
          return true;
          
        }).map(item=>item.proName);
        if(!otherProNameList.length){
          return true;
        }
        let isEquality = true;
        for(let i=0;i<otherProNameList.length;i++){
          let key = otherProNameList[i];
          if(currentItem[key]!=storeItem[key]){
            isEquality = false;
            break;
          }
        }
        return isEquality;
      },
      //整理需要合并的表格数据
     	/**
			options ={
			//需要合并的参数
		    	hebingProps: [
					{
						proName: 'id', //需要合并的prop 名称
						columnIndexList: [0] // //需要合并的 columnIndex下标列表
					},
				]
			}	
		*/ 
      disposalData(list, options = {}) {
      options.hebingProps.forEach((oItem) => {
				let {
					proName,
					columnIndexList
				} = oItem;
				let storeValue, storeIndex,storePreItem,hebing;
				list.forEach((item, index) => {
          // let isEquality = this.previousOneProNameValueAllEquality(options.hebingProps,proName,item,storePreItem);
          let isEquality = this.previousProNameValueAllEquality(options.hebingProps,proName,item,storePreItem);  
					if (storeValue != item[proName] || !isEquality) {
						if (index != 0) {
							let currentItem = list[storeIndex];
							if(hebing>1){
                let objs = {
								[proName]: {
									hebing,
                  proName,
									columnIndexList
								}
							}
                if (!currentItem.tableOptions) {
								currentItem.tableOptions = {
									...objs
								}
							} else {
								currentItem.tableOptions = {
									...currentItem.tableOptions,
									...objs
								}
							}
              }
						}
						storeValue = item[proName];
						storeIndex = index;
						hebing = 1;
					} else if (storeValue == item[proName]  && this.isEmpty(item[proName])  && index != 0 && isEquality ) {
						hebing += 1;
							if(index*1+1==list.length){
                let currentItem = list[storeIndex];
                if(hebing>1){
                  let objs = {
                    [proName]: {
                      hebing,
                  proName,
                      columnIndexList
                    }
                  }
                  if (!currentItem.tableOptions) {
                    currentItem.tableOptions = {
                      ...objs
                    }
                  } else {
                    currentItem.tableOptions = {
                      ...currentItem.tableOptions,
                      ...objs
                    }
                  }
                }
							}
					}
          storePreItem = item;
				})
			})
			return list
		},
     objectSpanMethod({
			row,
			column,
			rowIndex,
			columnIndex
		}) {
			let {
				tableOptions
			} = row;
			if (tableOptions) {
				for (let key in tableOptions) {
					let item = tableOptions[key];  
					let {
						hebing = 0, columnIndexList = [], proName = ''
					} = item;
					if (columnIndexList.length && columnIndexList.includes(columnIndex)) {
						// let hebing = row.hebing || null
						if (hebing) {
              let  storeProName  = proName;
							this.storeProNameObj[proName] = true;
							this.storeRowObj[storeProName + columnIndex] = rowIndex;
							this.storeHebingObj[storeProName + columnIndex] = hebing
							return {
								rowspan: hebing,
								colspan: 1,
							}
						} 
					}
				}
			}
       for(let key in this.storeProNameObj){
          let storeProName = key
          let storeRowIndex = this.storeRowObj[storeProName + columnIndex]
          let hebing = this.storeHebingObj[storeProName + columnIndex];
          if (storeProName && storeRowIndex  != undefined &&
           storeRowIndex + hebing  > rowIndex) {
			return {
					rowspan: 0,
					colspan: 0,
				}
			}
        }
     }
    }
  };

var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

原理

在这里插入图片描述
主要是原始的tableData表格数据
经过处理后，
在tableData 数据 需要合并的项插入 tableOptions 属性
tableOptions 属性中包含了需要合并的表格列项列表columnIndexList 及判断 prop名称 proName
然后 使用 合并行或列的计算方法:span-method="objectSpanMethod"
objectSpanMethod 通过判断 tableOptions 实现合并列

HHH 917
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
el-table 表格合并
qq_46302247的博客
09-01 1574
【代码】el-table 表格合并。
关于el-table列的单元格合并
最新发布
weixin_44270521的博客
05-23 286
关于表格合并
el-table合并列
m0_62693253的博客
07-14 1195
el-table合并列。
el-table动态合并数据相同且连续的列
qq_47657875的博客
10-30 362
【代码】el-table动态合并数据相同且连续的列。
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
都随它大小便吧
05-10 1万+
有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
Element-UI是一款基于Vue.js的开源UI组件库，它提供了丰富的界面组件，如表格（el-table）、按钮、提示、下拉菜单等，极大地简化了Web前端开发过程。然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置...
element-ui表格合并span-method的实现方法
10-16
在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...
Element-UI Table组件上添加列拖拽效果实现方法
08-27
在模板部分，我们使用 `el-table` 组件来渲染表格，并使用 `el-table-column` 组件来渲染表头。我们还添加了一个 `dragState` 对象来记录拖动状态。 拖动状态 在记录拖动状态时，我们需要记录几个关键参数，包括...
element-ui表格列金额显示两位小数的方法
10-18
首先，我们需要理解Element-UI的`el-table-column`组件。这个组件用于定义表格中的列，我们可以设置其属性如`prop`来指定数据源中的字段，`label`来定义列的标题，以及`align`来调整列内容的对齐方式。在处理金额...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
论element-ui表格的合并行和列（巨细节）
热门推荐
小邹的博客
03-15 1万+
​ 作为一个后端来写前端属实是痛苦、讲真的、刚开始我是真不想用饿了么的这个合并行和列、因为太语焉不详了、看着头疼、后来发现好像我没得选、只好硬着头皮上了。
element（table）合并相同数据的列
apppws的博客
08-08 1602
element（table）合并相同数据的列。
Element表格之表头合并、单元格合并
Harrietjia的博客
09-13 5459
要进行单元格合并，关键在于你要对数据渲染的前进行判断处理。
vue2+elementUI表格实现实现多列动态合并
四岁爱上了她的博客
07-05 1307
elementUI表格的多列合并
elementui table 合并列
weixin_46391404的博客
09-07 545
【代码】elementui table 合并列。
el-table动态表格的封装方式
大灰狼的小绵羊哥哥的博客
08-14 1442
el-table
Vue - ElementUI 表格合并行或列
技术共享，共同进步！
10-20 1481
Vue - ElementUI 表格合并行或列
vue3+element-ui实现el-table表格组件自动循环滚动
04-26
对于实现el-table表格组件自动循环滚动，可以使用element-ui提供的scroll组件，并设置它的属性为loop：true。具体实现步骤如下： 1. 在template中使用el-table组件，并设置属性fixed-layout和height，fixed-layout为true时，固定表格布局，height设置表格的高度。 2. 在el-table标签内部，使用el-scrollbar组件，设置其属性v-model和noresize，其中v-model为当前滚动位置，noresize为禁止重新调整尺寸。 3. 在el-scrollbar内部使用el-table-column组件，设置表格的列信息，并填充数据。注意：表格的列宽需固定，否则会影响滑动效果。 4. 最后，在el-table组件中使用el-table-column定义的列信息，呈现数据。 实现以上步骤后，即可得到一个自动循环滚动的el-table表格组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值