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,
		        };
		      }
		    },
相关推荐
哆啦A梦158834 分钟前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫42 分钟前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo1 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li1 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐1 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586542 小时前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊3 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表3 小时前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子3 小时前
Next.js 入门指南
开发语言·javascript·next.js
罚时大师月色4 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript