统计合计

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

普通用法

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-crud :option="option"
             :data="data"></avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  { sum: 5, avg: 10, count: 2 },
  { sum: 15, avg: 20, count: 1 }
]);

const option = ref({
  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>

自定义计算

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-crud :option="option"
             :data="data"
             :summary-method="summaryMethod"
             @selection-change="selectionChange"></avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const selectList = ref([]);
const data = ref([
  { sum: 5, avg: 10, count: 2 },
  { sum: 15, avg: 20, count: 1 }
]);

const option = ref({
  selection: true,
  index: true,
  showSummary: true,
  column: [
    { label: '相加', prop: 'sum' },
    { label: '平均值', prop: 'avg' },
    { label: '统计', prop: 'count' }
  ]
});

const selectionChange = (list) => {
  selectList.value = list;
};

const summaryMethod = ({ columns }) => {
  const sums = [];
  if (columns.length > 0) {
    columns.forEach((column, index) => {
      let prop = column.property;
      if (['sum', 'avg', 'count'].includes(prop)) {
        let values = selectList.value.map(item => Number(item[prop] || 0));
        let all = values.length !== 0 ? values.reduce((a, b) => a + b) : 0;
        if (prop === 'sum') {
          sums[index] = all;
        } else if (prop === 'avg') {
          sums[index] = values.length ? all / values.length : 0;
        } else if (prop === 'count') {
          sums[index] = values.length;
        }
      } else {
        sums[index] = '-';
      }
    });
  }
  return sums;
};
</script>