合计 el-table

/deep/ .el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td{
  background: white;
  font-size: 12px;
  text-align: center;
}
/deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
  border-right: 1px solid transparent;
}

 

show-summary
:summary-method="getSummaries"

 

<el-table
  class="elTableStyle" highlight-current-row
  :data="tableDay"
  show-summary
  :summary-method="getSummaries"
  :cell-style="{padding:'0',fontSize: '12px', borderRight: '0px solid #ebeef5',textAlign: 'center'}"
  :row-style="{height:'35px'}"
  :header-cell-style="{background:'#F5F7FA',height:'35px',padding:'0',textAlign:'center', fontSize: '13px', color: '#505050', minWidth: '109px'}"
  :header-row-style="{height:'35px'}"
  :height="clientHeight - 380 + 'px'" border fit
  @expand-change="expandMethod"
  id="mainTable"
>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table组件是Vue.js中非常常用的表格组件,它提供了丰富的功能和配置选项。其中,自定义合计el-table的一个重要功能之一,可以用于计算表格中某一列的合计值。 要实现el-table的自定义合计,你可以使用el-table-column组件的summary-method属性。这个属性接受一个函数,用于计算合计值并返回。 下面是一个示例代码,演示了如何在el-table中自定义合计: ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="score" label="分数" :summary-method="getTotalScore"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, score: 80 }, { name: '李四', age: 20, score: 90 }, { name: '王五', age: 22, score: 85 } ] }; }, methods: { getTotalScore(param) { const { columns, data } = param; if (columns.length === 1) { // 只有一列时,直接返回合计值 let total = 0; data.forEach(item => { total += item.score; }); return `合计:${total}`; } else { // 多列时,返回空字符串 return ''; } } } }; </script> ``` 在上面的代码中,我们定义了一个el-table组件,其中包含了三个el-table-column组件。其中,第三个el-table-column组件的summary-method属性绑定了一个名为getTotalScore的方法。这个方法接受一个参数param,包含了当前列的信息和数据。在getTotalScore方法中,我们通过遍历数据计算出分数的合计值,并返回合计值。 通过以上代码,你可以实现el-table的自定义合计功能。你可以根据自己的需求,修改getTotalScore方法来计算其他列的合计值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值