el-table合计计算完成率

以下是使用element-ui的el-table进行合计计算完成率的示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="task" label="任务"></el-table-column>
    <el-table-column prop="finished" label="已完成数量"></el-table-column>
    <el-table-column prop="total" label="总数量"></el-table-column>
    <el-table-column label="完成率">
      <template slot-scope="scope">
        {{ (scope.row.finished / scope.row.total * 100).toFixed(2) }}%
      </template>
      <template slot="footer">
        <el-row>
          <el-col :span="3">合计</el-col>
          <el-col :span="3">{{ sum('finished') }}</el-col>
          <el-col :span="3">{{ sum('total') }}</el-col>
          <el-col :span="3">{{ (sum('finished') / sum('total') * 100).toFixed(2) }}%</el-col>
        </el-row>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', task: '任务1', finished: 10, total: 20 },
        { name: '李四', task: '任务2', finished: 15, total: 25 },
        { name: '王五', task: '任务3', finished: 18, total: 22 }
      ]
    }
  },
  methods: {
    sum(prop) {
      return this.tableData.reduce((sum, item) => sum + item[prop], 0)
    }
  }
}
</script>

在这个示例中，我们使用了element-ui的el-table组件来展示一个任务列表，其中包括每个人的姓名、任务名称、已完成数量和总数量。我们使用了一个计算属性来计算每个人的完成率，并在表格中展示出来。在表格的底部，我们使用了一个自定义的footer slot来展示合计行，其中包括已完成数量、总数量和完成率的合计值。我们使用了一个sum方法来计算每列的合计值，并在表格底部展示出来。