1、预计效果如下

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>

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()

  }

},

3）mounted周期初始化加载

mounted () {

  this.$nextTick(() => {

    this.showSummariesPosition()

  })

},

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

巴特西

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

1、预计效果如下

2、前端及样式部分

1）el-table

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

3）mounted周期初始化加载

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

最新文章

热门文章