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表格显示问题:v-show无法影响el-table-column列的解决方案
Vue表格显示问题:v-show无法影响el-table-column列的解决方案
812 0
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
241 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
4月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
388 0
|
5月前
|
JavaScript 前端开发
table表格和下拉组件中data为什么必须是一个函数?
table表格和下拉组件中data为什么必须是一个函数?
|
6月前
关于解决el-select组件自动清除数据空格的问题
关于解决el-select组件自动清除数据空格的问题
200 1
|
JavaScript
VUE element-ui之table表格勾选复选框动态合计某列的值
VUE element-ui之table表格勾选复选框动态合计某列的值
588 0
VUE element-ui之table表格勾选复选框动态合计某列的值
|
JavaScript BI
el-table 多表格弹窗嵌套数据显示异常错乱问题
## 1、业务背景 使用vue+element开发报表功能时,需要列表上某列的超链接按钮弹窗展示,在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗,以此类推多表格弹窗嵌套,本文以弹窗两次为例 最终效果如下示例页面 ![微信截图_20231110143638.png](https://ucc.alicdn.com/pic/developer-ecology/j2ygdazy447va_6eb0201441bc40a4b5bda9a7e573f0d2.png)
199 0
|
JavaScript
el-select下拉多选框 el-select 设置默认值不可删除功能
Element-UI是一款广泛使用的Vue.js组件库,其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而,在Element 3.0版本中,El-Select下拉多选框默认值可被删除,这可能会导致一些意外情况。本文将介绍如何解决这个问题,实现El-Select下拉多选框设置默认值不可删除的功能。
655 0
el-select下拉多选框 el-select 设置默认值不可删除功能
|
缓存 JavaScript 前端开发
el-table 列的动态显示与隐藏
当我们在对表格数据查看的时候,可能某些列的数据是当前想要重点关注的,而某些列并不需要展示出来,我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。