Vue + Element 表格多选选中值相加求和 - 实用教程

你可以使用Vue的计算属性来实现表格多选选中的值相加合计。首先，给每个表格行添加一个复选框，并将选中状态绑定到一个数组中。然后，使用计算属性来遍历选中的行，并将对应的值相加。

下面是一个示例代码：

<template>
  <div>
    <el-table :data='tableData' style='width: 100%'>
      <el-table-column type='selection'></el-table-column>
      <el-table-column prop='name' label='Name'></el-table-column>
      <el-table-column prop='value' label='Value'></el-table-column>
    </el-table>

    <div>Total: {{ total }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Item 1', value: 10 },
        { name: 'Item 2', value: 20 },
        { name: 'Item 3', value: 30 }
      ],
      selectedRows: []
    }
  },
  computed: {
    total() {
      let sum = 0;
      for (let row of this.selectedRows) {
        sum += row.value;
      }
      return sum;
    }
  },
  watch: {
    selectedRows(newVal) {
      console.log(newVal);
    }
  }
}
</script>

在上面的代码中，我们使用了Element UI的`el-table`组件来展示表格数据，并添加了一个复选框列。`selectedRows`数组用来存储选中的行数据，`total`计算属性遍历`selectedRows`数组，并将对应的值相加得到合计值。在模板中，我们使用`{{ total }}`来显示合计值。

你可以根据实际需求修改上述代码来适应你的项目。