Vue3-admin-template的表格合计计算

直接上代码：

 
          
          
          
            {{ dates }}
          
          
            
          
          
          
          
            
            
            
            
          
          
          
          
          
          
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
          
            
          
          
            
          
          
          
            
          
          
            
          
          
          
          
          
        

里面用到两个属性：

    show-summary

   :summary-method="getSummaries"

第二步：逻辑部分

const 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 ((index >= 6 && index < 10) || (index >= 12 && index <= 34) || index == 38) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        sums[index] = sums[index].toFixed(2);
        // sums[index] += ' 元';
      } else {
        sums[index] = '';
      }
    });

    return sums;
  };

原创作者：吴小糖

创作时间: 2023.11.29