Vue + ElementUI 表格多选值相加计算合计值

在 Vue 和 ElementUI 中，可以使用计算属性和 watch 来实现表格多选选中的值相加的合计值。

首先，在 data 中定义一个数组 selectedRows 来保存选中的行数据，以及一个变量 total 来保存合计值：

data() {
  return {
    selectedRows: [],
    total: 0
  }
}

然后，在表格的多选列中添加一个 selection-change 事件，将选中的行数据保存到 selectedRows 数组中：

<el-table-column type='selection' @selection-change='handleSelectionChange'></el-table-column>

在 methods 中定义 handleSelectionChange 方法：

methods: {
  handleSelectionChange(rows) {
    this.selectedRows = rows
  }
}

接下来，在计算属性中计算选中行的合计值：

computed: {
  selectedTotal() {
    let total = 0
    for (let i = 0; i < this.selectedRows.length; i++) {
      total += this.selectedRows[i].value
    }
    return total
  }
}

最后，在模板中显示合计值：

<div>合计值：{{ selectedTotal }}</div>

这样，当用户在表格中选择多行时，selectedRows 数组会更新，selectedTotal 计算属性会重新计算合计值，并显示在模板中。