el-table合并单元格的方式

最新推荐文章于 2025-03-25 15:45:07 发布

曹成龙

最新推荐文章于 2025-03-25 15:45:07 发布

阅读量5.2k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/code_knife/article/details/108999689

版权

本文介绍了在Vue.js中使用el-table组件进行单元格合并的三种方法：一是遵循element官网的案例；二是通过合并数据相同单元格的方式，并能灵活扩展判断列数；三是基于特定行数据判断来实现任意列的单元格合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table单元格合并

方法一：element官网给出的案例

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
        label="数值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="数值 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
        label="数值 3">
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop

最低0.47元/天解锁文章