element UI table合并单元格方法

废话不多讲,直接上代码,希望能帮到需要的朋友

javascript 复制代码
  // 合并单元格
  function spanMethod({ row, column, rowIndex, columnIndex }) {
    //定义需要合并的列字段,有哪些列需要合并,就自定义添加字段即可
    const fields = ['declareRegion']   // 直接在里面添加需要合并的字段
    // 判断只合并定义字段的列数据
    // 当前行的数据
    const cellValue = row[column.property]
    let countRowspan = 1 //用于合并计数多少单元格
    if (cellValue && fields.includes(column.property)) {
      const prevRow = tableData.value[rowIndex - 1] //上一行数据
      let nextRow = tableData.value[rowIndex + 1] //下一行数据

      // 当上一行的数据等于当前行数据时,当前行单元格隐藏
      if (prevRow && prevRow[column.property] === cellValue && prevRow.declareRegion == row.declareRegion) {
        return { rowspan: 0, colspan: 0 }
      } else {
        // 反之,则循环判断若下一行数据等于当前行数据,则当前行开始进行合并单元格
        while (nextRow && nextRow[column.property] === cellValue && nextRow.declareRegion == row.declareRegion) {
          nextRow = tableData.value[++countRowspan + rowIndex]
        }
        if (countRowspan > 1) {
          return { rowspan: countRowspan, colspan: 1 }
        }
      }
    }
  }

表格上这么用就OK了

html 复制代码
<el-table :data="tableData" border="1" :span-method="spanMethod">
  <el-table-column type="index" label="序号" align="center" width="100"/>
  <el-table-column prop="declareRegion" align="center" label="市(州)" width="150"/>
  <el-table-column prop="schoolName" align="center" label="学校(县、区+幼儿园具体名称)" :show-overflow-tooltip="true"/>
  <el-table-column prop="financialSupport" align="center" label="经费支持(万)" :show-overflow-tooltip="true"/>
</el-table>

上个效果,因为很多人要看是不是自己想的样式

是这个效果的就拿走吧,笔芯~

相关推荐
trsoliu1 分钟前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
一 乐4 分钟前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·商城推荐系统
亿元程序员10 分钟前
为什么游戏公司现在都喜欢用protobuf?
前端
鹏多多12 分钟前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js
fruge19 分钟前
前端数据可视化实战:Chart.js vs ECharts 深度对比与实现指南
前端·javascript·信息可视化
卓码软件测评28 分钟前
借助大语言模型实现高效测试迁移:Airbnb的大规模实践
开发语言·前端·javascript·人工智能·语言模型·自然语言处理
IT_陈寒33 分钟前
SpringBoot 3.0实战:这套配置让我轻松扛住百万并发,性能提升300%
前端·人工智能·后端
♡喜欢做梦34 分钟前
Spring Web MVC 入门秘籍:从概念到实践的快速通道(上)
前端·spring·mvc
Dragon Wu42 分钟前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
艾小码1 小时前
2025年前端菜鸟自救指南:从零搭建专业开发环境
前端·javascript