首页 > 其他分享 >element中表格合并单元格

element中表格合并单元格

时间:2024-08-29 09:37:11浏览次数:5  
标签:index 表格 单元格 element mergeObj key push 其值

最近要写一个如下图的项目,需要合并单元格

 

<el-table :data="list" border style="width: 1000px;"  :span-method="objectSpanMethod">
   <el-table-column align="center" prop="frist_name" :label="list[0].specName" ></el-table-column>
   <el-table-column align="center" prop="second_name" :label="list[0].specName1"></el-table-column>
   <el-table-column align="center" prop="price" label="价格"></el-table-column>				
</el-table>

  其中  objectSpanMethod方法是合并单元格的关键,以下代码需要赋值

    mergeObj:{},               mergeCol:['frist_name'],
getSpanArr(list){
	this.mergeCol.forEach(key=>{
	  let count=0//记了了起始位置
	  this.mergeObj[key]=[];//记录每-列的合并信息
	  list.forEach((item,index)=>{// index == 0表示数据为第一行,直接 push 一个 1
			if(index === 0){
				this.mergeObj[key].push(1)
			} else {
				// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1
				if(item[key]=== list[index-1][key]){
					this.mergeObj[key][count] += 1;
					this.mergeObj[key].push(0);
				} else {
					// 如果当前行和上一行其值不相等
					count = index;//记录当前位置
					this.mergeObj[key].push(1);//重新push一个1
				}
			}
		})
	})
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
		if(this.specsList.length!=1){
			if(this.mergeCol.indexOf(column.property)!==-1){
				// 判断其值是否为0
				if(this.mergeObj[column.property][rowIndex]){
					return[this.mergeObj[column.property][rowIndex],1]
				}else{
					return[0,0]
				}
			}
		}
},

  

标签:index,表格,单元格,element,mergeObj,key,push,其值
From: https://www.cnblogs.com/bingchenzhilu/p/18385909

相关文章

  • 【爬虫实战】——利用bs4和sqlalchemy操作mysql数据库,实现网站多行数据表格爬取数据
    前言此篇接上一篇的内容,在其基础上爬取网站的多行表格数据,以及把数据写入到mysql数据库中目录一、定位表格查找元素二、提取数据三、写入mysql数据库四、附录一、定位表格查找元素首先打开网站,如图需要爬取多行数据的表格,利用查找元素定位,看图中分析得知我要爬取的是tr......
  • Excel导入数据时,配置单元格样式大全(POI)
    Excel导入数据时,配置单元格样式大全一:基础配置1.字体样式:Fontfont=workbook.createFont();font.setFontName("Arial");//设置字体名称font.setFontHeightInPoints((short)12);//设置字体大小font.setBold(true);//设置粗体font.setItalic(true);//设置斜体f......
  • vue element 多层循环嵌套的表单校验
    最近vue2遇到的问题有一个数据结构是多层嵌套varlevel1list=[{name:'level1-1',level2List:[{name:'level2-1',level3List:[{name:'le......
  • 解除 Excel 表格的文档保护全攻略
    在日常工作和学习中,我们可能会遇到Excel表格被保护无法编辑的情况。别担心,今天就为大家分享几种解除Excel表格文档保护的方法。一、导入腾讯文档可以将受保护的Excel表格上传到腾讯文档。在部分情况下,腾讯文档会尝试自动解除表格保护,这样你就能够编辑内容了。如果......
  • gstreamer教程(5)——构建应用之element的使用
    Element 元素:对于应用程序程序员来说, GstElement 对象是GStreamer中最重要的对象。element(元素)是媒体Pipeline的基本构建块。您使用的所有不同的高级组件都派生自 GstElement。每个解码器、编码器、解复用器、视频或音频输出事实上都是一个 GstElement。什么是元素:......
  • vue.js3+element-plus+typescript add,edit,del,search
     vite.config.tsserver:{cors:true,//默认启用并允许任何源host:'0.0.0.0',//这个用于启动port:5110,//指定启动端口open:true,//启动后是否自动打开浏览器proxy:{'/api':{target:'http://localhost:8081/',//实际请求地址......
  • 自动引用elementplus组件
    1、Vue项目中安装ElementPlus#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus#pnpm$pnpminstallelement-plus2、组件按需引入配置Vant按需引入---安装:unplugin-vue-components 插件unplugin-vue-components 插件可以在Vue文件中自......
  • Docker常用命令大全2-表格总结的 Docker 命令:
    Docker容器命令命令 描述dockerps 列出所有运行中的容器dockerps-a 列出所有容器(不考虑状态)dockerps-s 列出所有运行中的容器及文件大小dockerps-q 列出运行中容器的IDdockerps-aq 列出所有容器的ID(不考虑状态)dockerps--filter'key=value' 过滤容器列表doc......
  • 探索Python数据表格的奥秘:xlwt库的魔法之旅
    文章目录探索Python数据表格的奥秘:xlwt库的魔法之旅背景:为何选择xlwt?库的简介安装指南:如何获取xlwt?基础函数:xlwt的五大金刚实战演练:xlwt在行动常见问题:bug与解决方案总结:xlwt的力量探索Python数据表格的奥秘:xlwt库的魔法之旅背景:为何选择xlwt?在数据处理的世界里,E......
  • vue 实现简单AI聊天程序(一) elementui 聊天框编写
    这个系列的目标是开发一个AI聊天前端界面+后端问答程序,探索前端界面开发。尝试后端对接阿里云千问大模型,后续还会更新自己部署的大模型。这一期用elmentui来开发一个聊天框的前端,根据用户发送的内容,AI会返回一个一模一样的内容,在纯前端模拟聊天的效果。同时界面可以自适......