elementUI 表格中如何合并动态数据的单元格

elementUI 表格中如何合并动态数据的单元格

ui中提供的案例是固定写法无法满足 实际开发需求

下面进行改造如下 准备数据如下

javascript 复制代码
//在表格中 设置单元格的方法  :span-method="spanMethodFun"
<el-table :data="tableData" border  :span-method="spanMethodFun">
//...
</el-table>

//表格数据  这里的数据是动态获取的
let tableData = ref([{no:1,id:1},{no:1,id:1},{no:1,id:1},{no:1,id:2}])
//定义数组 用来临时存储 需要合并的列数 和行数
let spanArr:any = []
//下标 用来设置临时存储数据的
let pos:any = 0
//获取 需要合并数据的 方法
function getSpaArr(){
//循环表格数据
	for(let i=0;i<tableData.value.length;i++){
		if(i == 0){//如何是第一个数据  表示只有一个相同的数据索引设置为0
			spanArr.push(1)
			pos = 0
		}else{
			if(tableData.value[i].id == tableData.value[i - 1].id){ //这里用id判断的 也可以用相同的名字 或者其他都可以判断值
				// 如果数据相同 第一列加1  其他 设置为0
				spanArr[pos] += 1
				spanArr.push(0)
			}else{
				// 不相同 重新开始判断
				spanArr.push(1)
				pos = i
			}
		}
	}
}
//调用方法 获取临时合并数据
getSpaArr()
//查看临时合并的数据
console.log(spanArr,'spanArr');// 得到数据如下:[3, 0, 0, 1] 'spanArr'

//这里调用合并单元格事件 row当前行的值,column当前列的值,rowIndex行的下标,columnIndex列的下标
const spanMethodFun = ({ row, column, rowIndex, columnIndex, }: any) => {
	// console.log(row,column,rowIndex,columnIndex);
	//如何临时合并数据存在执行
	if(spanArr.length > 0){
	//这里设置第几行需要合并数据
		if (columnIndex == 1 || columnIndex == 6) {//第几列数据
			return { 
				rowspan: spanArr[rowIndex], //需要合并的行数 通过行下表 获取临时存储值
				colspan: spanArr[rowIndex]>0?1:0, //需要合并的列数 0代表不合并 1 合并成一列
			}
		}
	}
}

效果如下 第2行 和最后一行进行了合并 其他没有合并

相关推荐
小张成长计划..6 小时前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3
IT_陈寒6 小时前
Vue3性能优化实战:这7个技巧让我的应用加载速度提升50%!
前端·人工智能·后端
西西学代码6 小时前
Flutter---音效模式选择器
前端·html
TLucas6 小时前
Layui连线题编辑器组件(ConnectQuestion)
前端·编辑器·layui
艾小码7 小时前
告别页面呆板!这5个DOM操作技巧让你的网站活起来
前端·javascript
正在学习前端的---小方同学8 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
键盘不能没有CV键12 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ12 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python13 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep14 小时前
【前端】前端运行环境的结构
前端