前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >el-table 在第一行添加合计行和操作按钮

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

作者头像
GoodTime
发布2024-03-05 16:02:04
2580
发布2024-03-05 16:02:04
举报

1、预计效果如下

2、前端及样式部分

1)el-table
代码语言:javascript
复制
<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>
2)合计的位置设置、按钮添加
代码语言:javascript
复制
// 合计行设置
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()
  }
},
3)mounted周期初始化加载
代码语言:javascript
复制
mounted () {
  this.$nextTick(() => {
    this.showSummariesPosition()
  })
},

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

以上就是el-table 在第一行添加合计行和操作按钮的介绍,做此记录,如有帮助,欢迎点赞关注收藏!
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、预计效果如下
  • 2、前端及样式部分
    • 1)el-table
      • 2)合计的位置设置、按钮添加
        • 3)mounted周期初始化加载
          • 以上就是el-table 在第一行添加合计行和操作按钮的介绍,做此记录,如有帮助,欢迎点赞关注收藏!
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档