脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element-ui table表格底部合计自定义配置

element-ui table表格底部合计自定义配置过程

 更新时间：2023年10月19日 09:32:52   作者：痴心阿文  
这篇文章主要介绍了element-ui table表格底部合计自定义配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

element-ui table表格底部合计自定义配置 

【element-ui】

table表格底部合计自定义配置，最近做管理系统用到饿了么UI，用到了table表格合计需求，常用的table底部，有时候不是所有内容都需要合计，比如上图这个编号是数字，但是不需要合计计算处理的，这时候就需要用到自定义表格，把不需要合计的内容隐藏掉

效果如下：

方法写在下面：

带合计的表格设置

1.参数 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="规格" 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="请输入数量"></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;
    },

最后关于表格底部样式问题

官方默认合计行在表格尾部展示，以下为更改合计行的位置，放表格的首行位置

通过css实现可以加以下代码：

//  /deep/ 为深度操作符，可以穿透到子组件
            /deep/ .el-table {
                display: flex;
                flex-direction: column;
            }
            //  order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方
            /deep/ .el-table__body-wrapper {
                order: 1;
            }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论