element Table表格el-table表尾合计行：定义合计逻辑_el-table合计行

将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中。

      <el-table
        :data="styleTableData"
        style="width: 100%"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="date1"
          label="组合名称"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="组合颜色"
          width="180"
        >
        </el-table-column>
        <el-table-column align="center" prop="address" label="尺码">
        </el-table-column>
        <el-table-column align="center" prop="style" label="款号">
        </el-table-column>
        <el-table-column align="center" label="数量" prop="numaaa">
          <template slot-scope="scope">
            <el-input
              size="mini"
              @input="styleInputEdit(scope.$index, scope.row)"
              type="number"
              v-model="scope.row.numaaa"
              placeholder="数量"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="期望交期">
          <template slot-scope="scope">
            <el-date-picker
              size="mini"
              style="width: 100%; line-height: 28px"
              align="center"
              v-model="scope.row.date"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </template>
        </el-table-column>

        <el-table-column width="80" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="styleHandleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

    getSummaries(param) {
      // console.log("param", param);
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 5) {
          sums[index] = "汇总";
          return;
        }

        const values = data.map((item) => Number(item[column.property]));
        console.log(values);
        if (!values.every((value) => isNaN(value))) {
          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] = "";
        }
      });
      return sums;
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

注意！！！
element官方文档里举例的方法const values = data.map((item) =>Number(item[column.property])); 要注意[column.property]，要将计算合计的列加上prop属性，否则合计无效

相加失精问题

            if (!isNaN(value)) {
              let d = 0; //定义小数位的初始长度，默认为整数，即小数位为0
              let arr = curr;
              if (arr.toString().split(".").length > 1) {
                //判断数字是否为小数
                //获取小数位的长度
                var temp = arr.toString().split(".").length;
                //比较此数的小数位与原小数位的长度，取小数位较长的存储到d中
                d = d < temp ? temp : d;
              }
              //计算需要乘的数值
              let m = Math.pow(10, d);
              return (prev* m + curr * m) / m;
            } else {
              return prev;
            }```

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17