element表格多行合计

效果

 

<el-table
            :data="tableData"
            border
            row-key="id"
            default-expand-all
            show-summary
            :summary-method="getSummaries"
            :tree-props="{ children: 'children' }"
         >
            <el-table-column label="序号">
               <template slot-scope="props">
                  <span v-if="props.row.order">{{ props.row.order }}</span>
                  <span v-else>合计</span>
               </template>
            </el-table-column>
            <el-table-column label="船型" prop="ship"> </el-table-column>
            <el-table-column label="船名" prop="shipName"> </el-table-column>
            <el-table-column label="船员数量" prop="peopleNum">
               <template slot-scope="props">
                  {{
                     props.row.peopleNum
                        | calculaColumn(props.row, "peopleNum", tableData)
                  }}
               </template>
            </el-table-column>
            <el-table-column label="施工区域" prop="area"> </el-table-column>
            </el-table-column>
            <el-table-column label="挖泥时长(h)" prop="dredgrTime">
               <template slot-scope="props">
                  {{
                     props.row.dredgrTime
                        | calculaColumn(props.row, "dredgrTime", tableData)
                  }}
               </template>
            </el-table-column>
            <el-table-column label="抛泥时长(h)" prop="throwrTime">
               <template slot-scope="props">
                  {{
                     props.row.throwrTime
                        | calculaColumn(props.row, "throwrTime", tableData)
                  }}
               </template>
            </el-table-column>
            <el-table-column label="备注" prop="remarks"> </el-table-column>
         </el-table>

使用过滤器

filters: {
      /**
       * 表格添加末尾合计栏
       * @param val 当前值
       * @param row 当前行
       * @param field 当前字段
       * @param data 表格数据
       */
      calculaColumn(val, row, field, data) {
         // 如果有id即数据项，正常输出本值
         if (row.id) {
            return row[field];
         }
         // 没有id则是最后合计项
         let sums = 0;
         data.map((item) => {
            sums += Number(item[field]);
         });
         return sums;
      },
   },

element自带的合计方法

/**
       * 表格生成合计栏
       */
      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 (!values.every((value) => isNaN(value) || value === 0)) {
               sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value) && value > 0) {
                     return prev + curr;
                  } else {
                     return prev;
                  }
               }, 0);
            } else {
               sums[index] = "";
            }
         });

         return sums;
      },

构造一个空数据行

mounted() {
      // 初始化数据
      this.init();
      // 地图
      this.$nextTick(() => {
         this.importMap(0);
         this.tableData.push({
            id: "",
            ship: "",
            shipName: "",
            peopleNum: "",
            area: "",
            dredgPeriod: "",
            dredgrTime: "",
            throwrTime: "",
            overflowTime: "",
            load: "",
            party: "",
            position: "",
            remarks: "",
         });
      });
      // 构造表格序号
      this.tableData.map((item, index) => {
         item.order = index + 1;
         item.children.map((child, childindex) => {
            child.order = index + 1 + "." + (childindex + 1);
         });
         return item;
      });
   },