问答

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

作者:admin 2021-06-16 我要评论

https://jsfiddle.net/ksvyda1c/ 运行结果 el-table :data="tableData" border style="width: 1102px" show-summary :summary-method="getSummaries" el-table-c...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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>

QQ截图20200724172411.jpg

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

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • elementui里的summary-method自定义方

    elementui里的summary-method自定义方

  • three.mesh中的lookAt 是基于什么区loo

    three.mesh中的lookAt 是基于什么区loo

  • 一个pandas数据框统计问题,求大佬指导

    一个pandas数据框统计问题,求大佬指导

  • 微服务多个服务强依赖,但又是必须是串

    微服务多个服务强依赖,但又是必须是串

腾讯云代理商
海外云服务器