element-ui?table表格底部合計自定義配置過程

更新時間：2023年10月19日 09:32:52 作者：癡心阿文

這篇文章主要介紹了element-ui?table表格底部合計自定義配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

element-ui table表格底部合計自定義配置

【element-ui】

table表格底部合計自定義配置，最近做管理系統(tǒng)用到餓了么UI，用到了table表格合計需求，常用的table底部，有時候不是所有內(nèi)容都需要合計，比如上圖這個編號是數(shù)字，但是不需要合計計算處理的，這時候就需要用到自定義表格，把不需要合計的內(nèi)容隱藏掉

效果如下：

方法寫在下面：

帶合計的表格設置

1.參數(shù) show-summary

2. 方法 :summary-method="getSummaries"

<!--帶合計的表格設置-->   
<el-table :data="infolist" border show-summary  style="width: 100%;"
          @selection-change="selectionChangeHandleMateria" max-height="450"  :summary-method="getSummaries">
          <el-table-column type="selection" align="center" header-align="center" width="50"></el-table-column>
          <el-table-column prop="short_name" header-align="center" label="簡稱" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="goods_code" header-align="center" label="商品編碼" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="goods_name" header-align="center" label="商品名稱" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="goods_spec" header-align="center" label="規(guī)格" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="water_quantity" header-align="center" label="水份含量(%)" align="center"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="material_quantity" header-align="center" label="原料重量(kg)" align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.material_quantity" placeholder="請輸入數(shù)量"></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <i class="icon-btn el-icon-delete" @click.stop="deleteInfo(scope.row)"></i>
            </template>
          </el-table-column>
        </el-table>

自定義方法 getSummaries

//自定義方法
  getSummaries(param) {
        const { columns, data } = param;
        const sums = {};
        columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '合計';
                return;
            }
            // if (index === 3) {
            //     sums[index] = '';
            //     return;
            // }
            const values = data.map(item => Number(item[column.property]));
            if (column.label == "水份含量(%)" || column.label == "原料重量(kg)") {
              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] += ' kg';
              } else {
                  // sums[index] = 'N/A';
              }
            }
        });
        return sums;
    },

最后關(guān)于表格底部樣式問題

官方默認合計行在表格尾部展示，以下為更改合計行的位置，放表格的首行位置

通過css實現(xiàn)可以加以下代碼：

//  /deep/ 為深度操作符，可以穿透到子組件
            /deep/ .el-table {
                display: flex;
                flex-direction: column;
            }
            //  order默認值為0，只需將表體order置為1即可移到最后，這樣合計行就上移到表體上方
            /deep/ .el-table__body-wrapper {
                order: 1;
            }