el-table 在第一行添加合计行和操作按钮

简介: el-table 在第一行添加合计行和操作按钮

1、预计效果如下

image.gif

2、前端及样式部分

1)el-table

<el-table
  size="small"
  stripe
  style="width: 100%"
  class="table_info"
  v-loading="loading"
  :data="list"
  show-summary>
  <el-table-column
    label="标题"
    prop="Title"
    min-width="2">
  </el-table-column>
  <el-table-column
    label="1数量"
    prop="Num1"
    min-width="2">
  </el-table-column>
  <el-table-column
    label="2数量"
    prop="Num2"
    min-width="2">
  </el-table-column>
  <el-table-column
    label="3数量"
    prop="Num3"
    min-width="2">
  </el-table-column>
  <el-table-column
    label="4数量"
    prop="Num4"
    min-width="2">
  </el-table-column>
  <el-table-column
    label="操作"
    width="300">
    <template slot-scope="scope">
      <div style="line-height: 1; font-size: 0;">
        <el-button size="mini" @click="这里写单击方法">查看</el-button>
      </div>
    </template>
  </el-table-column>
</el-table>

image.gif

2)合计的位置设置、按钮添加

// 合计行设置
showSummariesPosition () {
  // 合计行显示在表头
  let table = document.querySelector('.el-table')
  let footer = document.querySelector('.el-table__footer-wrapper')
  let body = document.querySelector('.el-table__body-wrapper')
  table.removeChild(footer)
  table.insertBefore(footer, body)
  // 在合计行的最后一列添加按钮
  let html = table.querySelectorAll('td')[5].querySelector('.cell')
  html.innerHTML = "<el-button size='mini' style='padding: 7px 15px;font-size:12px;border-radius:3px;display: inline-block;display: inline-block;line-height: 1;white-space: nowrap;cursor: pointer;background: #fff;border: 1px solid #dcdfe6;color: #606266;-webkit-appearance: none;text-align: center;box-sizing: border-box;outline: 0;margin: 0;transition: .1s;font-weight: 500;'>查看</el-button>"
  html.onclick = () => {
    this.toAllDetails()
  }
},

image.gif

3)mounted周期初始化加载

mounted () {
  this.$nextTick(() => {
    this.showSummariesPosition()
  })
},

image.gif

至此,效果实现如本文开篇所示效果图

以上就是el-table 在第一行添加合计行和操作按钮的介绍,做此记录,如有帮助,欢迎点赞关注收藏!

目录
相关文章
|
JavaScript
vue给table组件添加合计
vue给table组件添加合计
341 0
|
前端开发 JavaScript 安全
【前端相关】elementui使用el-upload组件实现自定义上传
【前端相关】elementui使用el-upload组件实现自定义上传
2630 0
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
uniapp遮罩层穿透问题,uview遮罩层组件,uview的actionSheet组件.鼠标穿透,uview组件u-popup遮罩滚动穿透问题
1091 0
|
3月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
894 0
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
890 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9475 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
7月前
|
前端开发 JavaScript 数据格式
通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)
array.reduce()可以用来数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据、性能优化等,使用难度相对高一些,但是能大大减少代码量。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时
|
JavaScript 前端开发
js获取url参数值的几种方式
js获取url参数值的几种方式
|
Oracle Java 关系型数据库
jdk17安装全方位手把手安装教程 / 已有jdk8了,安装JDK17后如何配置环境变量 / 多个不同版本的JDK,如何配置环境变量?
本文提供了详细的JDK 17安装教程,包括下载、安装、配置环境变量的步骤,并解释了在已有其他版本JDK的情况下如何管理多个JDK环境。
18289 0