el-table复杂表头（多级表头行或列的合并）

最新推荐文章于 2025-06-22 19:56:09 发布
最新推荐文章于 2025-06-22 19:56:09 发布
阅读量406 收藏 9
点赞数 4
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39893889/article/details/148794885

el-table复杂表头（多级表头行或列的合并）

第一种

需求

在这里插入图片描述

实现效果

在这里插入图片描述

实现方式

<el-table
  :data="tableData"
  border
  max-height="550px"
  :header-cell-style="headerCellStyle"
  :span-method="objectSpanMethod"
>
  <el-table-column label="分公司下发" align="center">
    <el-table-column label="总数" prop="index" align="center">
      <el-table-column prop="index" label="序号" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="总数的值" align="center">
      <template #header>
        <div class="tableTitleContent">31</div>
      </template>
      <el-table-column prop="content" label="内容" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="已完成" prop="content" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="已完成的值" align="center">
      <template #header>
        <div class="tableTitleContent">12</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="未完成" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="未完成的值" align="center">
      <template #header>
        <div class="tableTitleContent">19</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="完成率" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="完成率的值" align="center">
      <template #header>
        <div class="tableTitleContent">38.80%</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="中心创建" align="center">
    <el-table-column label="总数" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="总数的值" align="center">
      <template #header>
        <div class="tableTitleContent">12</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="已完成" align="center">
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="已完成的值" align="center">
      <template #header>
        <div class="tableTitleContent">6</div>
      </template>
      <el-table-column label="内容(占位列)"></el-table-column>
    </el-table-column>
    <el-table-column label="未完成" align="center">
      <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="未完成的值" align="center">
      <template #header>
        <div class="tableTitleContent">6</div>
      </template>
      <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="完成率" align="center">
      <el-table-column prop="deptName" label="创建部门" align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="完成率的值" align="center">
      <template #header>
        <div class="tableTitleContent">50%</div>
      </template>
      <el-table-column prop="isFinished" label="是否完成" align="center"></el-table-column>
    </el-table-column>
  </el-table-column>
  <template v-slot:empty>
    <table-empty></table-empty>
  </template>
</el-table>

// 计算表头是否展示
const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 2) {
    if (columnIndex > 1 && columnIndex < 12) {
      return { display: 'none' }
    }
  }
  // 然后让第2行第1列的单元格横向占据11个单元格位置填充刚刚隐去导致的空白
  if ((columnIndex == 1) & (rowIndex == 2)) {
    nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute('colspan', '11')
    })
  }
}
// 合并单元格
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex == 1) {
    return {
      rowspan: 1,
      colspan: 11
    }
  } else if (columnIndex > 1 && columnIndex <= 11) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else {
    return {
      rowspan: 1,
      colspan: 1
    }
  }
}

第二种

需求

在这里插入图片描述

实现效果

在这里插入图片描述

实现方式


<el-table :data="tableData" border :header-cell-style="headerCellStyle" :span-method="objectSpanMethod">
  <el-table-column label="成果" align="center" show-overflow-tooltip>
    <el-table-column label="占位单元格">
      <el-table-column label="占位单元格">
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column prop="index" label="序号" align="center"></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="专利" align="center" show-overflow-tooltip>
    <el-table-column label="论文" align="center" show-overflow-tooltip>
      <el-table-column label="软著" align="center" show-overflow-tooltip>
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column prop="content" label="内容" align="center" show-overflow-tooltip></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="专利的值" align="center" show-overflow-tooltip>
    <template #header>
      <div class="tableTitleContent">--</div>
    </template>
    <el-table-column label="论文的值" align="center" show-overflow-tooltip>
      <template #header>
        <div class="tableTitleContent">--</div>
      </template>
      <el-table-column label="软著的值" align="center" show-overflow-tooltip>
        <template #header>
          <div class="tableTitleContent">--</div>
        </template>
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>

  <el-table-column label="项目" align="center" show-overflow-tooltip>
    <el-table-column label="占位单元格">
      <el-table-column label="占位单元格">
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="自研产品" align="center" show-overflow-tooltip>
    <el-table-column label="科研项目" align="center" show-overflow-tooltip>
      <el-table-column label="全员双创" align="center" show-overflow-tooltip>
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="自研产品的值" align="center" show-overflow-tooltip>
    <template #header>
      <div class="tableTitleContent">--</div>
    </template>
    <el-table-column label="科研项目的值" align="center" show-overflow-tooltip>
      <template #header>
        <div class="tableTitleContent">--</div>
      </template>
      <el-table-column label="全员双创的值" align="center" show-overflow-tooltip>
        <template #header>
          <div class="tableTitleContent">--</div>
        </template>
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>

  <el-table-column label="标准" align="center" show-overflow-tooltip>
    <el-table-column label="占位单元格">
      <el-table-column label="占位单元格">
        <el-table-column label="占位单元格">
          <el-table-column label="占位单元格">
            <el-table-column label="内容(占位单元格)"/>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="国家标准" align="center" show-overflow-tooltip>
    <el-table-column label="行业标准" align="center" show-overflow-tooltip>
      <el-table-column label="地方标准" align="center" show-overflow-tooltip>
        <el-table-column label="团体标准" align="center" show-overflow-tooltip>
          <el-table-column label="企业标准" align="center" show-overflow-tooltip>
            <el-table-column label="创新成果分类" align="center" show-overflow-tooltip></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <el-table-column label="国家标准的值" align="center" show-overflow-tooltip>
    <template #header>
      <div class="tableTitleContent">--</div>
    </template>
    <el-table-column label="行业标准的值" align="center" show-overflow-tooltip>
      <template #header>
        <div class="tableTitleContent">--</div>
      </template>
      <el-table-column label="地方标准的值" align="center" show-overflow-tooltip>
        <template #header>
          <div class="tableTitleContent">--</div>
        </template>
        <el-table-column label="团体标准的值" align="center" show-overflow-tooltip>
          <template #header>
            <div class="tableTitleContent">--</div>
          </template>
          <el-table-column label="企业标准的值" align="center" show-overflow-tooltip>
            <template #header>
              <div class="tableTitleContent">--</div>
            </template>
            <el-table-column label="详细分类" align="center" show-overflow-tooltip></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table-column>
  <template v-slot:empty>
    <table-empty></table-empty>
  </template>
</el-table>

// 计算表头是否展示
const headerCellStyle = ({row, column, rowIndex, columnIndex}) => {

  // 合并内容列
  if (rowIndex === 5) {
    if (columnIndex > 1 && columnIndex < 7) {
      return { display: 'none' }
    }
    // 然后让第5行第1列的单元格横向占据8个单元格位置填充刚刚隐去导致的空白
    if (columnIndex === 1) {
      nextTick(() => {
        document.querySelector(`.${column.id}`).setAttribute('colspan', '6')
      })
    }
  }
  // 合并成果、专利、标准列
  if (rowIndex > 0 && rowIndex < 5) {
    if (columnIndex === 0 || columnIndex === 3 || columnIndex === 6) {
      return { display: 'none' }
    }
  }
  if (rowIndex === 0 && (columnIndex === 0 || columnIndex === 3 || columnIndex === 6)) {
    nextTick(() => {
      document.querySelector(`.${column.id}`).setAttribute('rowspan', '5')
    })
  }
  // 合并其他单元格
  if (rowIndex === 3 || rowIndex === 4) {
    if (columnIndex !== 0 && columnIndex !== 3 && columnIndex !== 6 && columnIndex !== 7 && columnIndex !== 8) {
      return { display: 'none' }
      // return { visibility: 'hidden' }
    }
  }
  if (rowIndex === 2) {
    if (columnIndex == 1 || columnIndex === 2 || columnIndex === 4 || columnIndex === 5) {
      nextTick(() => {
        document.querySelector(`.${column.id}`).setAttribute('rowspan', '3')
      })
    }
  }
}
// 合并单元格
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
  if (columnIndex == 1) {
    return {
      rowspan: 1,
      colspan: 6
    }
  } else if (columnIndex > 1 && columnIndex < 7) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else {
    return {
      rowspan: 1,
      colspan: 1
    }
  }
}
el-table 合并表头 -- 合并单元格 -- 表尾合计 -- 修改/拆分合并单元格 -- 动态单元格合并 -- 动态合并单元格
st646889325的博客
05-16 1887
1， this.mergeSpanRules代表合并起始位置，0代表不参与合并，但由于第一条数据的索引为0，所以展示成了0，但不会影响效果，因为下边将会把起始位置跟行的索引位置比较，要是觉得不够直观的话，可以把0代表不参这个值改成任意字符来表示，但切记不要用除0外的数字。通过数据集合mergeRules来制定合并规则，只要改变mergeRules里规则绑定值即可使其改变合并规则，以下只展示了最基础的代码，提供过方法后，具体怎么扩展，可根据实际需求进行改动。
el-table 表头合并
chen_wei_yx的博客
05-11 6549
理解这个之后，其实代码也就很好理解了，找到表头这一行要合并的两列，将第一列的colSpan设为2，代表单元格可以占据两列，将第二列隐藏。合并表头代码思路是将两个列通过handerMethod隐藏第一列的同时，让第二列占据两个单元格的宽度来实现合并效果。效果如下，圈起来的是一个表头对应两列，这里是多级表头（本篇借鉴而来，如有需要请留言删除！如上就是列头合并，接来下是内容合并，依据列中的值进行表格合并，也可以多条件多单元格合并。比如说表头是第一行，行号是0，表头第一行第一列，行号和列号都是0。
Element表格表头合并技巧
最新发布
var_let_const的博客
06-22 595
本文介绍了Element UI表格(el-table)单元格合并的实现方法。主要内容包括：1.表头合并的实现，通过headerCellStyle方法设置colSpan和display属性隐藏部分表头；2.表体单元格合并，使用span-method方法和spanArr数组计算需要合并的单元格；3.特定单元格合并，通过rowIndex和columnIndex定位目标单元格；4.常见问题解决，如表头与表格不对齐的三种解决方案。文章提供了详细的代码示例，包括表头合并为"基本信息"、同名列合并等功
el-table实现合并表头
weixin_46155697的博客
02-19 1532
elementTable实现合并表头。
el-table合并表头
weixin_43842692的博客
04-12 404
【代码】el-table合并表头。
element用法总结
香蕉你个芭呐呐的博客
12-23 3191
表格合并单元格 通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 如下：合并列 html...
el-table 多级表头导出（适用于表头固定，表格有固定列）
weixin_42987973的博客
08-22 1302
el-table 多级表头固定，内容固定，导出excel模板设置内容居中，列宽
vue+element-ui动态生成多级表头的方法
12-29
<el data=tabledata01 span-method=tableSpanMethod max-height=420> <el v-for='item in tableConfig' label=item.label prop='item.prop' width='item.width' key=item.id> <el-table-column v-if='item....
vue3中el-table实现多表头并表格合并行或列
一个努力搬砖的前端开发
01-07 3913
【代码】vue3中el-table实现多表头并表格合并行或列。
el-table二次封装-兼容无限级嵌套表头
Mjt658的博客
01-19 963
el-table二次封装-兼容无限级嵌套表头
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
vue3 el-table多级表头收缩扩展的实现（TS风味版）
07-27
用于《vue3 el-table多级表头收缩扩展的实现》这篇文章的项目Demo下载 文章地址：https://blog.csdn.net/weixin_42063951/article/details/125633625
el-table多级表头数据处理
front_xiaoyang的博客
06-25 1455
因为el-table所需的数据是数组的形式，而返回的数据是对象，所以要先将对象类型的数据处理为数组。日期列是每一个产品下面的data里面的日期（也都是对象，服辣），所以将日期单独摘出来放到一个数组中，同时将每个产品的data里面的日期加上一个time的属性名用来和单独摘出来的日期数据进行对应，到这里数据基本处理的差不多了，在测试过程中发现存放日期的数组日期排序发生了混乱，然后又将日期排下序。来了个需求说是要加一个多级表头的表格，本来想着很快就完事的，结果一看数据，直接两眼一黑...，先看看效果图吧。
el-table合并表头，合并行
ma13b的博客
07-13 5633
el-table表头合并，行合并
el-table复杂横向+纵向多级表头+修改表格样式
gjylalaland的博客
03-21 1836
对多级表头其中某一格像设置背景色，用了好多vue给出的表格参数都写不出效果，最后打开控制台查看元素位置，用了CSS选择器。
el-table多级表头，合并表头，设置样式
weixin_52618969的博客
05-26 3328
el-table 合并表头，多级表头，设置样式
el-table表格动态行/表头合并
boringmembership的博客
11-20 1207
1、:span-method="spanMethod" // table上的默认事件绑定 spanMethod。2、数据加载完成后对数据处理下 ######唯一需要修改的地方，#########3、table合并列自动调用默认事件 spanMethod。1、给多行表头添加一个class，根据实际情况修改。2、对表头不同列进行合并 根据实际情况修改。
element el-table写多级表头
qq_45915072的博客
04-16 1186
【代码】element el-table写多级表头。
el-table 多级表头固定列
06-10
### el-table 多级表头固定列实现方法 在使用 Element UI 的 `el-table` 组件时，如果需要实现多级表头并固定列的功能，可以通过以下方式完成： #### 1. **多级表头的定义** 多级表头通过嵌套 `el-table-column` 实现。每一级表头对应一个 `el-table-column` 标签，子级表头作为父级表头的子标签嵌套在其中[^1]。 ```vue <el-table :data="tableData" border style="width: 100%"> <el-table-column label="一级表头" fixed width="400"> <el-table-column prop="code" label="编号" width="100"></el-table-column> <el-table-column prop="name" label="名称" width="150"></el-table-column> <el-table-column prop="category" label="分类" width="150"></el-table-column> </el-table-column> <el-table-column label="其他数据" width="200"> <el-table-column prop="unit" label="单位" width="100"></el-table-column> <el-table-column prop="value" label="数值" width="100"></el-table-column> </el-table-column> </el-table> ``` #### 2. **固定列的实现** 对于多级表头，直接在一级表头中设置 `fixed` 属性只会固定该表头下的首列。为确保整个一级表头及其子列都固定，需满足以下条件： - 在一级表头中添加 `fixed` 属性。 - 确保一级表头的宽度等于其所有子列宽度之和[^2]。 ```vue <el-table-column label="固定列" fixed width="400"> <el-table-column prop="code" label="编号" width="100"></el-table-column> <el-table-column prop="name" label="名称" width="150"></el-table-column> <el-table-column prop="category" label="分类" width="150"></el-table-column> </el-table-column> ``` #### 3. **解决数据切换导致的错位问题** 当数据动态更新时，可能会出现表格渲染异常或数据错位的情况。为避免此问题，可在数据更新后调用 `el-table` 的 `doLayout()` 方法重新布局表格[^2]。 ```javascript this.$refs.table.doLayout(); ``` #### 4. **数据处理** 若返回的数据结构不符合 `el-table` 的要求（如对象而非数组），需先对数据进行预处理。例如，将对象类型的数据转换为数组形式，并调整字段层级以匹配表头结构[^3]。 ```javascript function processData(data) { const result = []; data.forEach(item => { const row = { code: item.code, name: item.name, category: item.category, unit: item.data.unit, value: item.data.value, dates: Object.keys(item.data.dates).map(key => ({ time: key, dateValue: item.data.dates[key] })) }; result.push(row); }); return result; } ``` ### 注意事项 - 确保一级表头的宽度与子列宽度总和一致，否则可能导致显示异常。 - 在动态更新数据时，务必调用 `doLayout()` 方法以保证表格渲染正确。 - 如果涉及复杂数据结构，需提前对数据进行处理以适配 `el-table` 的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值