el-table中合并垂直方向的单元格

el-table中合并垂直方向的单元格

一、合并垂直方向单元格,有相同字段的合并一起

合并一起的都有相同的字段mergeType

javascript 复制代码
      <el-table
        class="merge-table"
        :data="tableData"
        v-loading="isLoading"
        :span-method="spanMethod"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        size="mini"
        empty-text="暂无数据"
        :stripe="true"
        border
        style="width: 100%"
      >
      </el-table>


		spanMethod({ row, column, rowIndex, columnIndex }) {
		      if (
		        columnIndex === 0 ||
		        columnIndex === 1 ||
		        columnIndex === 2 ||
		        columnIndex === 3 ||
		        columnIndex === 4 ||
		        columnIndex === 5 ||
		        columnIndex === 6 ||
		        columnIndex === 7
		      ) {
		        // 缓存通过筛选条件得到的数组,避免重复计算
		        const tempArr = this.tableData.filter(b => b.mergeType === row.mergeType);
		        const isFirstRow =
		          rowIndex === this.tableData.findIndex(item => item.mergeType === row.mergeType);
		        if (isFirstRow) {
		          return {
		            rowspan: tempArr.length,
		            colspan: 1,
		          };
		        } else {
		          return {
		            rowspan: 0,
		            colspan: 0,
		          };
		        }
		      } else {
		        return {
		          rowspan: 1,
		          colspan: 1,
		        };
		      }
		    },
相关推荐
KaneLogger几秒前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志13 分钟前
JavaScript中如何遍历对象?
javascript
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理9 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止10 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器