Vue2+Vuetify 0.17数据表格列求和及页脚展示求助

嘿，同为Vue新手的伙伴，我正好折腾过Vuetify 0.17的DataTable，给你分享个靠谱的实现方法，刚好能解决你在页脚展示area和floor总和的需求~

核心思路 #

Vuetify 0.17的v-data-table支持自定义footer插槽，我们可以直接在这个插槽里插入合计行，把你已经计算好的total数据填进去就行。

完整代码示例 #

1. 模板部分（Vue组件的template）

<v-data-table
  :items="yourDataList"
  :headers="tableHeaders"
  class="elevation-1"
>
  <!-- 自定义合计页脚 -->
  <template slot="footer">
    <tr class="table-footer-total">
      <!-- colspan数值要根据你的非合计列数量调整，比如前面有2个其他列就设为2 -->
      <td colspan="2" class="text-right font-weight-bold">合计：</td>
      <td class="text-center">{{ total.area }}</td>
      <td class="text-center">{{ total.floor }}</td>
      <!-- 如果你还有其他列，继续添加td或者调整colspan -->
    </tr>
  </template>
</v-data-table>

2. 脚本部分（Vue组件的script）

export default {
  data() {
    return {
      // 你的原始数据列表
      yourDataList: [
        { name: 'A楼', area: 30, floor: 2 },
        { name: 'B楼', area: 40, floor: 3 },
        { name: 'C楼', area: 30, floor: 2 }
      ],
      // 表格表头，根据你的实际列配置调整
      tableHeaders: [
        { text: '楼宇名称', value: 'name' },
        { text: '区域面积', value: 'area' },
        { text: '楼层数', value: 'floor' }
      ],
      // 你已经计算好的总和（如果是动态计算可以用computed）
      total: { area: 100, floor: 7 }
    }
  },
  // 如果你需要动态计算总和（替代手动赋值total），可以用computed
  // computed: {
  //   total() {
  //     return this.yourDataList.reduce((sum, item) => {
  //       return {
  //         area: sum.area + Number(item.area),
  //         floor: sum.floor + Number(item.floor)
  //       }
  //     }, { area: 0, floor: 0 })
  //   }
  // }
}

3. 样式优化（可选）

为了让合计行更显眼，可以加一点简单的样式：

.table-footer-total {
  background-color: #f8f9fa;
}
.table-footer-total td {
  border-top: 2px solid #dee2e6;
}

注意事项 #

• 一定要调整colspan的数值，确保和你表格前面非合计列的数量匹配，不然布局会错乱。
• 如果你的area或floor是字符串类型，记得用Number()或者parseInt()转成数值再计算，避免出现字符串拼接的错误。

这样就能在表格页脚完美展示你需要的总和啦，亲测在Vuetify 0.17版本下完全可用~

内容的提问来源于stack exchange，提问作者Pash