el-table 表格新增一行合计_vue 在el-table表格下方添加一行合计

el-table 表格下面新增一行合计计算表格的数值

前言：根据产品需求要求计算出当前页面的总合计金额和点击复选框显示复选框里的计算金额。

1.自己搭建的页面结构

    <!-- 合计 -->
    <div class="totalAll">
      <div>
        <strong>合计</strong>
      </div>
      <div>
        <strong>应付款金额</strong>
        <span>{{ totalComputedMoney.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') }}</span>
      </div>
    </div>
1
2
3
4
5
6
7
8
9
10

下面是样式部分，可随着自己的需求更改样式

.totalAll{
  position: fixed;
  height: 60px;
  bottom:50px;
  background: #f8f8f8;
  z-index: 99999;
  display: flex;
  padding-top: 10px;
  border-bottom: 1px solid #dfe6ec;
  border-radius: 10px 10px 0 0;
  width: 1000px;
  left: 50%;
  transform: translateX(-330px);
}
.totalAll div {
  display: flex;
  flex-direction: column;
  width: 140px;
  // margin: 0 30px;
}
.totalAll div strong {
  margin-bottom: 10px;
}
.totalAll div span, .totalAll div strong {
  text-align: center;
  font-size: 14px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

计算属性里面computed里计算出两个数据 当前页所有合计 和 选中合计

    // 当前页的合计总数金额计算
    tableComputedMoney() {
      return this.SupplyData.reduce((item, curr) => {
        return Number(item) + Number(curr.amount)
      }, 0)
    },
    // 选中单据的金额计算
    checkComputedMoney() {
      return this.mergePriceData.reduce((item, curr) => {
        return Number(item) + Number(curr.amount)
      }, 0)
    }
1
2
3
4
5
6
7
8
9
10
11
12

根据选中的表格的数据具体代码如下：

    // table 点击的复选框放进新的数组里
    handleSelectionChange() {
      this.mergePriceData = this.$refs.multipleTable.selection.map(
        (item) => item
      )
      // 判断是不是点击表格重新计算金额
      if (this.mergePriceData.length) {
        this.totalComputedMoney = this.checkComputedMoney
      } else {
        this.totalComputedMoney = this.tableComputedMoney
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12

这样是解决了，但初始化时，页面还是没有变化，还应加上初始化的逻辑：

获取表格时再重新计算一下，不是很便捷，希望指出不足！

    getComputedMoney() {
      this.totalComputedMoney = this.SupplyData.reduce((item, curr) => {
        return Number(item) + Number(curr.amount)
      }, 0)
    },
1
2
3
4
5

具体效果如下：