el-table 在第一行添加合计行和操作按钮
  I7JaHrFMuDsU 22天前 21 0

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

2、前端及样式部分

1)el-table

<el-table
size="small"
stripe

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

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

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 22天前 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年04月12日   13   0   0 前端vue
  TEZNKK3IfmPf   2024年03月30日   65   0   0 vue
  TEZNKK3IfmPf   2024年04月12日   19   0   0 vue
  I7JaHrFMuDsU   2024年03月22日   20   0   0 javascriptvue
  TEZNKK3IfmPf   2024年03月29日   31   0   0 javascriptvue
I7JaHrFMuDsU