element el-table 合计行

html:

<el-table
        border
        ref="table"
        :data="formData"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
// ....

// prop="price" 是重点，不加上没效果
        <el-table-column align="center" label="司机运费" prop="price">
          
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" placeholder="司机运费" size="medium" ></el-input>
          </template>
        </el-table-column>

</el-table>

js:

methods:{
// 自定义表格的合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        if (index != columns.length-1) {
          sums[index] = '--'
          return
        }
        const values = data.map(item => item[column.property])
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return Number(prev) + Number(curr)
          } else {
            return Number(prev)
          }
        }, 0)
      })
      return sums
    },
}