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组件添加合计
590 0
|
固态存储 安全 程序员
搭建程序员个人博客网站的服务器配置怎么选?
搭建个人博客网站时,合理选择服务器配置至关重要。推荐1核CPU、2GiB内存、SSD硬盘及2M-10M带宽,适合大多数个人博客。操作系统方面,Linux更为经济高效。建议选择如阿里云等知名云服务商,同时考虑服务器的可扩展性和安全性,确保网站稳定运行与良好体验。
2287 2
|
XML JSON JavaScript
【前端】Vue项目中 JSON 编辑器的使用
【前端】Vue项目中 JSON 编辑器的使用
6709 0
|
存储 JavaScript 前端开发
【面试题】JS的14种去重方法,看看你知道多少(包含数组对象去重)
【面试题】JS的14种去重方法,看看你知道多少(包含数组对象去重)
539 0
|
小程序 计算机视觉
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts
5003 0
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
14250 120
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
1284 0
|
前端开发 JavaScript
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
本文介绍了在Vue项目中使用`xlsx`和`xlsx-style`(或`xlsx-style-vite`)库实现导出具有自定义样式的Excel文件的方法,并提供了详细的示例代码和操作效果截图。
3341 2
使用Vue+xlsx+xlsx-style实现导出自定义样式的Excel文件
|
数据可视化
echarts画有三角形柱形的柱状图
echarts画有三角形柱形的柱状图
773 0
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
10250 10

热门文章

最新文章