element ui表格相同数据合并单元格，通过cell-style、header-cell-style修改表格样式

brck

已于 2022-07-01 16:36:38 修改

阅读量1.3k

点赞数

文章标签： elementui vue.js 前端

于 2022-07-01 16:35:19 首次发布

本文链接：https://blog.csdn.net/m0_72474864/article/details/125560680

版权

本文介绍了如何在Element UI中实现表格相同数据的单元格合并，并通过cell-style和header-cell-style属性来修改表格样式，提供了一个完整的代码实现示例。

摘要由CSDN通过智能技术生成

效果

相同数据合并单元格

//1.给table传入span-method方法
   <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
      :cell-style="cellStyle"
      :header-cell-style="headerCellStyle"
    >
      <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" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === '0'" type="success"> 审核</el-tag>
          <el-tag v-if="scope.row.status === '1'" type="primary">待审核</el-tag>
          <el-tag v-if="scope.row.status === '2'" type="danger">