快捷導(dǎo)航

詳解vue結(jié)合el-table實現(xiàn)表格小計總計需求(summary-method)

更新時間：2024年01月18日 17:05:13 作者：范特西是只貓

這篇文章主要介紹了vue結(jié)合el-table實現(xiàn)表格小計總計需求(summary-method),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1. 實現(xiàn)效果

2. 核心部分

1.el-table 添加如下配置，添加 show-summary 屬性，配置 summary-method 函數(shù)

<el-table
  .......
  show-summary
  :summary-method="getSummaries"
>
	......
</el-table>

2.getSummaries 計算小計/總計邏輯

getSummaries(param) {
  // 計算小計
  let result = this.tableData
  let sumTotalData = Object.assign({}, emptyTotalData)
  result.forEach((item) => {
    sumTotalData.age += Number(item.age)
    sumTotalData.height += Number(item.height)
  })
  // 計算總計
  let totalResult = this.statistics
  return [
    <span>
      <strong> 小計 </strong>
      <br />
      <strong> 總計 </strong>
    </span>,
    <span> </span>,
    <span> </span>,
    <span>
      <span> {sumTotalData.age} </span> <br />
      <span> {totalResult.age} </span>
    </span>,
    <span>
      <span> {sumTotalData.height} </span> <br />
      <span> {totalResult.height} </span>
    </span>,
  ]
},

3. 完整組件代碼

<template>
  <div class="home">
    <div class="body">
      <el-table
        :data="tableData"
        border
        row-key="date"
        class="draggable-table"
        style="width: 100%"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column type="index" label="序號" width="200" />
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年齡" />
        <el-table-column prop="height" label="身高" />
      </el-table>
    </div>
  </div>
</template>
<script>
  import Sortable from 'sortablejs'
  let emptyTotalData = {
    age: 0,
    height: 0,
  }
  export default {
    name: 'Demo',
    data() {
      return {
        tableData: [], //table數(shù)據(jù)
        statistics: 0, //總計數(shù)據(jù)
      }
    },
    mounted() {
      // 調(diào)用后端接口table數(shù)據(jù)
      this.tableData = [
        { date: '2024-01-02', name: '張三1', age: '10', height: '165' },
        { date: '2024-01-03', name: '李四2', age: '11', height: '174' },
        { date: '2024-01-04', name: '王五3', age: '12', height: '174' },
        { date: '2024-01-05', name: '麻六4', age: '14', height: '185' },
        { date: '2024-01-07', name: 'kk5', age: '44', height: '179' },
        { date: '2024-01-08', name: 'fantay6', age: '21', height: '171' },
      ]
      // 調(diào)用后端接口返回的總計數(shù)據(jù)
      this.statistics = {
        age: '112',
        height: '1048',
      }
    },
    methods: {
      getSummaries(param) {
        // 計算小計
        let result = this.tableData
        let sumTotalData = Object.assign({}, emptyTotalData)
        result.forEach((item) => {
          sumTotalData.age += Number(item.age)
          sumTotalData.height += Number(item.height)
        })
        // 計算總計
        let totalResult = this.statistics
        return [
          <span>
            <strong> 小計 </strong>
            <br />
            <strong> 總計 </strong>
          </span>,
          <span> </span>,
          <span> </span>,
          <span>
            <span> {sumTotalData.age} </span> <br />
            <span> {totalResult.age} </span>
          </span>,
          <span>
            <span> {sumTotalData.height} </span> <br />
            <span> {totalResult.height} </span>
          </span>,
        ]
      },
    },
  }
</script>
<style scoped lang="scss">
  .home {
    .body {
      width: 890px;
      height: 500px;
      border: #31aab2 solid 10px;
      box-sizing: border-box;
      padding: 20px;
      box-sizing: border-box;
    }
  }
</style>

到此這篇關(guān)于vue結(jié)合el-table實現(xiàn)表格小計總計需求（summary-method）的文章就介紹到這了,更多相關(guān)vue el-table表格小計內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: