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,
		        };
		      }
		    },
相关推荐
wkj0013 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
GoldKey7 小时前
gcc 源码阅读---语法树
linux·前端·windows
Xf3n1an8 小时前
html语法
前端·html
张拭心8 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
漠月瑾-西安8 小时前
如何在 React + TypeScript 中实现 JSON 格式化功能
javascript·jst实现json格式化
烛阴8 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python
止观止9 小时前
React响应式组件范式:从类组件到Hooks
javascript·react.js·ecmascript
@大迁世界9 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
LJianK19 小时前
Java和JavaScript的&&和||
java·javascript·python
红尘散仙9 小时前
Rust 终端 UI 开发新玩法:用 Ratatui Kit 轻松打造高颜值 CLI
前端·后端·rust