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,
		        };
		      }
		    },
相关推荐
细节控菜鸡7 分钟前
【2025最新】ArcGIS for JS 范围裁剪(只保留特定区域显示),实现精准地理范围聚焦
开发语言·javascript·arcgis
前端小菜袅7 分钟前
uniapp配置自动导入uni生命周期等方法
前端·javascript·uni-app
Apifox9 分钟前
如何在 Apifox 中通过 AI 一键生成几十个测试用例?
前端·后端·ai编程
你真的可爱呀9 分钟前
uniapp学习【整体实践】
前端·学习·uni-app·实践
一枚前端小能手16 分钟前
「周更第7期」实用JS库推荐:Vite
前端·javascript·vite
小中123433 分钟前
异步请求的性能提升
前端
我是天龙_绍34 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
麦麦大数据1 小时前
F024 vue+flask电影知识图谱推荐系统vue+neo4j +python实现
vue.js·python·flask·知识图谱·推荐算法·电影推荐
我是天龙_绍1 小时前
Easing 曲线 easings.net
前端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue