elementui里的summary-method自定义方法要怎么动态合计结果？

Question

https://jsfiddle.net/ksvyda1c/ 运行结果

  
  
  <el-table :data="tableData" border style="width: 1102px" show-summary :summary-method="getSummaries">
             <el-table-column prop="id" label="" width="100" align="center"></el-table-column>
             <el-table-column prop="name" label="书籍名称" width="200" align="center"></el-table-column>
             <el-table-column prop="date" label="出版日期" width="200" align="center"></el-table-column>

             <el-table-column prop="price" label="价格" width="200" align="center">
                          <template slot-scope="scope">
                                  {{ '¥' }} {{ (scope.row.price * scope.row.count) | showPrice }} 
                          </template>
             </el-table-column>

             <el-table-column prop="count" label="购买数量" width="200" align="center">
                   <template slot-scope="scope">
                          <el-input-number v-model="scope.row.count" :min="1" :max="10"></el-input-number>
                  </template>
             </el-table-column>

             <el-table-column prop="remove" label="操作" width="200" align="center">
                  <template slot-scope="scope">
                          <el-button type="primary" icon="el-icon-delete" @click.native.prevent="remove(scope.$index, tableData)"></el-button>
                  </template>
             </el-table-column>
  </el-table>
   

<script type="text/javascript">

     const app = new Vue({
       el:"#app",
       data:{
          index:0,
          tableData:[
            {
              id:1,
              name:"《算法导论》",
              date:"2006-9",
              price:"100",
              count:1
            },
            {
              id:2,
              name:"《UNIX编程艺术》",
              date:"2006-2",
              price:"500",
              count:1
            },
            {
              id:3,
              name:"《123456》",
              date:"2020-9",
              price:"1000",
              count:1
            },
            {
              id:4,
              name:"77777",
              date:"2006-9",
              price:"150",
              count:1
            }
          ]
       },
       methods:{
          remove(index,rows){
              rows.splice(index,1);
          },

          

          // getsummaries
          getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
              if (index === 0) {
                sums[index] = '总价';
                return;
              }

              const values = data.map(item => Number(item[column.property]));
              if (column.property === 'price') {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
                sums[index] += ' 元';
              }else{
                sums[index] = '--'
              }
              
              if (column.property === 'count') {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
                sums[index] += ' ';
              }

            });

            return sums;
          }


       },
       computed:{
       },
       filters:{
          showPrice(value){
            value = Number(value);
            return value.toFixed(2)
          }
         
       }
     })

</script>

请问这里的summary-method要怎么写才能让总计的价格随着购买数量和单价变化而变化？

Answer 1

scope.row.price * scope.row.count | showPrice