Element 表格添加合计行、合并合计行

效果如下
在这里插入图片描述

table 添加属性 span-method 以及 ref

<template>
    <el-table
      ref="table"
      :span-method="arraySpanMethod"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

合并合计行方法

arraySpanMethod() {
    
    
  this.$nextTick(() => {
    
    
    if (this.$refs.table.$el) {
    
    
      let current = this.$refs.table.$el
          .querySelector(".el-table__footer-wrapper")
          .querySelector(".el-table__footer");
      let cell = current.rows[0].cells;
      cell[1].style.display = "none";
      cell[0].colSpan = "2";
    }
  })
},

猜你喜欢

转载自blog.csdn.net/weixin_44640323/article/details/121269619
今日推荐