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

最新推荐文章于 2024-07-05 14:27:38 发布

阳光的男夹克

最新推荐文章于 2024-07-05 14:27:38 发布

阅读量1.9k

点赞数 5

分类专栏： Element 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44640323/article/details/121269619

版权

Element 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

该博客介绍了如何在Vue.js应用中通过添加`span-method`属性和`ref`引用来实现表格的合并行功能。示例代码展示了如何定义合并行方法`arraySpanMethod`，并在`nextTick`回调中操作DOM进行列合并。此方法适用于需要动态合并表格行的场景。

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

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

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";
    }
  })
},