统计合计

配置相应的属性后，在表格末尾即可达到统计合计功能

普通用法

showSummary设置为true即可开启统计合计功能，sumColumnList属性配置需要计算的表格列配置，其中name为列的prop值，type为需要计算的类型，目前支持（合计 / 平均 / 统计）三个大功能，后期将会加强表格的计算能力

<avue-crud :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[
         {
          sum: 5,
          avg: 10,
          count: 2,
         },{
          sum: 15,
          avg: 20,
          count: 1,
         }
       ],
       option:{
          index:true,
          showSummary: true,
          sumColumnList: [
            {
              label:'自定义前缀:',
              name: 'sum',
              type: 'sum',
              decimals:1
            },
            {
              name: 'avg',
              type: 'avg'
            },
            {
              name: 'count',
              type: 'count'
            }
          ],
          column: [{
            label: '相加',
            prop: 'sum'
          },
          {
            label: '平均值',
            prop: 'avg'
          },
          {
            label: '统计',
            prop: 'count'
          }]
       }
    }
  }
}
</script>

Expand Copy Copy

自定义计算

<avue-crud  :option="option" :data="data" :summary-method="summaryMethod" @selection-change="selectionChange"></avue-crud>
<script>
export default {
  data(){
    return {
       selectList:[],
       data:[
         {
          sum: 5,
          avg: 10,
          count: 2,
         },{
          sum: 15,
          avg: 20,
          count: 1,
         }
       ],
       option:{
          index:true,
          showSummary: true,
          column: [{
            label: '相加',
            prop: 'sum'
          },
          {
            label: '平均值',
            prop: 'avg'
          },
          {
            label: '统计',
            prop: 'count'
          }]
       }
    }
  },
  methods:{
    selectionChange(list){
      this.selectList=list;
    },
    summaryMethod({ columns, data }){
      const sums = [];
      if (columns.length > 0) {
        columns.forEach((column, index) => {
          if ([0,1,6].includes(index) ) {
            sums[index] = '-'
          } else {
            let values = this.selectList.map(item => Number(item[column.property]));
            sums[index] = values;
          }
        });
      }
      return sums;
    },
  }
}
</script>

Expand Copy Copy