vue和原生js 计算表格合计

前段时间，前端实现了一个ant表格的合计，在网上找了很多方法，不过大多数都是element表格的合计，没有找见ant表格实现合计的方法。于是，借鉴了一下element实现合计的方法，把功能实现了。（自己瞎研究的方法，如果觉得我写的不对或者有更好的方法可以留言告知。）

ant表格和element表格写合计的区别：

ant表格没有 show-summary和 :summary-method="getSummaries"这两个属性，要在自定义的footer里面去调用自定义列的方法；
element表格有show-summary和 :summary-method="getSummaries"两个属性，所以直接用:summary-method去自定义列就好了。

vue ant表格合计

效果图：

image.png

html部分：

               <a-table
                    bordered
                    :loading="loading"
                    rowKey="userId"
                    :columns="columnsDetail"
                    :dataSource="dataSourceDetail"
                    :pagination="false"
                    :scroll="{ y: 350 }"
                    style="margin-bottom:30px;"
                  >
                    <span slot="waitCount" slot-scope="text, record">
                      {{ record.waitCount }}
                    </span>
                    <span slot="handledCount" slot-scope="text, record">
                      {{ record.handledCount }}
                    </span>
                    <template slot="footer" slot-scope="currentPageData">
                      <a-row>
                        <a-col
                          :span="6"
                          align="center"
                          v-for="(item, index) in getSummaries(currentPageData)"
                          :key="index"
                          >{{ item }}</a-col
                        >
                      </a-row>
                    </template>
                  </a-table>

js部分适用于ant表格和element：

   getSummaries(param) {
    //ant里面适用
      const data = param
      const columns = this.columnsDetail

   //element里面适用
   // const { columns, data } = param;

      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1 || index === 2 || index === 3) {
    //ant里面适用
          const values = data.map(item => Number(item[column.dataIndex]))
    //element里面适用
    // const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              }
            }, 0)
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },

vue element表格合计（js方法同ant的js方法）

效果图：

image.png

html部分

<el-table
          :data="tableData"
          show-summary
          :summary-method="getSummaries"
          border
          style="width: 100%"
        >
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="grade" label="数据" width="180">
          </el-table-column>
        </el-table>

注意： show-summary显示合计行，:summary-method="getSummaries"自定义合计列

使用js实现table的合计功能

效果图：

image.png

html部分：

  <table border="1" cellspacing="0" style="text-align: center;" id="table">
        <tr>
            <td>班级</td>
            <td>男生</td>
            <td>女生</td>
        </tr>
        <tr>
            <td>1班</td>
            <td>12</td>
            <td>24</td>
        </tr>
        <tr>
            <td>2班</td>
            <td>34</td>
            <td>13</td>
        </tr>
        <tr>
            <td>3班</td>
            <td>22</td>
            <td>45</td>
        </tr>
        <tr>
            <td>4班</td>
            <td>31</td>
            <td>32</td>
        </tr>
        <tr>
            <td>5班</td>
            <td>10</td>
            <td>9</td>
        </tr>
        <tr class="sum">
        </tr>
    </table>

js部分：

  <script>
        $(function () {
            var table = document.getElementById("table")
            //获取表格的行数
            var rows = table.rows
           //获取表格的列数
            var cells = table.rows.item(0).cells.length
            //每次加载完清空最后一列数据，防止二次加载出现多行数据
            $('.sum').empty()
            $('.sum').append('<td>合计</td>')
            // 如果从列开始遍历，得到的就是每一列的数据
            // 如果从行开始遍历，得到的就是每一行的数据
            for (var i = 1; i < cells; i++) {
                var sum = 0
                for (var j = 1; j < rows.length - 1; j++) {
                    sum += parseFloat(rows[j].cells[i].innerHTML.trim())
                }
                $('.sum').append('<td>' + sum + '</td>')
            }
        })
    </script>