[JavaScript知识库] [element-ui] el-table对合计行进行合并单元格

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> [element-ui] el-table对合计行进行合并单元格 -> 正文阅读

[JavaScript知识库][element-ui] el-table对合计行进行合并单元格

在这里插入图片描述

<template>
  <div style='height: 800px;width: 100%;background: #fff;'>
    <el-table  ref="table" border :data="tableData" :span-method="objectSpanMethod" stripe class="table-class" show-summary :summary-method="getNodeSummaries" highlight-current-row>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="名字" align="center" />
      <el-table-column prop="sex" label="性别" width="120" align="center" />
      <el-table-column prop="tiZh" label="体重" width="120" align="center" />
      <el-table-column prop="num1" label="数学" width="120" align="center" />
      <el-table-column prop="num2" label="英语" width="120" align="center" />
      <el-table-column prop="num3" label="语文" width="120" align="center" />
    </el-table>
  </div>
</template>

通过f12定位当前table的合计行的具体位置
在这里插入图片描述
然后通过原生dom获取到合计行的所有列的集合

const tds = document.querySelectorAll('#table .el-table__footer-wrapper tr>td');

合并列，其他列隐藏，显示列不用修改

tds[0].colSpan=4;
tds[0].style.textAlign='center'
tds[1].style.display='none'
tds[2].style.display='none'
tds[3].style.display='none'

监听属性，表格监听完整写法

watch:{
  表格数据:{
    immediate:true,
    async handler(){
      //await this.$nextTick(); 根据实际选择延迟调用
      const tds = document.querySelectorAll('#table .el-table__footer-wrapper tr>td');
      tds[0].colSpan=4;
	  tds[0].style.textAlign='center'
	  tds[1].style.display='none'
	  tds[2].style.display='none'
	  tds[3].style.display='none'
    }
  }