Vue Element table表格合并(动态)

在Vue.js项目开发中,文章介绍了如何处理表格数据,通过el-table组件结合span-method方法,实现当第一列(班级)的数据显示重复时,进行单元格合并,优化表格展示。getSpanArr函数用于处理数据,handleSpanMethod则计算合并的行数和列数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在项目开发过程中,会遇到合并表格的情况,这里针对第一列的重复数据进行合并展示

在这里插入图片描述

页面代码
<el-table
  :data="dataList"
  :span-method="handleSpanMethod"
  border
>
 <el-table-column label="班级" align="center" prop="className" />
 <el-table-column label="姓名" align="center" prop="name" />
 <el-table-column label="年龄" align="center" prop="age" />
</el-table>
JS代码实现
data() {
    return {
    	spanArr: [], // 遍历数据时,根据相同的标识去存储记录
      	pos: 0,
    	dataList: [
			{className: '高一三班', name: '张三', age: 18 },
			{className: '高一三班', name: '张无忌', age: 19 },
			{className: '高一六班', name: '王五', age: 18 },
			{className: '高一七班', name: '赵六', age: 19 },
			{className: '高一八班', name: '杜画', age: 20 },
		]
    }
},
created() {
   this.getSpanArr(this.dataList);
},
methods: {
	//表格合并单元格跨行,实现首列根据不同类型进行跨行
	 getSpanArr(data) {
	   this.spanArr = [];
	   this.pos = 0;
	   //遍历数据
	   data.map((item, index) => {
	     //判断是否是第一项
	     if (index == 0) {
	       this.spanArr.push(1);
	       this.pos = 0;
	     } else {
	       //不是第一项时,就根据标识去存储
	       if (data[index].className === data[index - 1].className) {
	         // 查找到符合条件的数据时每次要把之前存储的数据+1
	         this.spanArr[this.pos] += 1;
	         this.spanArr.push(0);
	       } else {
	         // 没有符合的数据时,要记住当前的index
	         this.spanArr.push(1);
	         this.pos = index;
	       }
	     }
	   });
	 },
	//得到行、列的合并值
	handleSpanMethod({ row, column, rowIndex, columnIndex }) {
	 // 页面列表上 表格合并行 -> 第几列(从0开始)
	 // 需要合并多个单元格时 依次增加判断条件即可
	 if (columnIndex === 0) {
	   // 二维数组存储的数据 取出
	   const _row = this.spanArr[rowIndex];
	   const _col = _row > 0 ? 1 : 0;
	   return {
	     rowspan: _row,
	     colspan: _col,
	   };
	   //不可以return {rowspan:0, colspan: 0} 会造成数据不渲染, 也可以不写else,eslint过不了的话就返回false
	 } else {
	   return false;
	 }
	},
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值