el-table合计功能

浅浅旳笑

已于 2024-03-21 09:45:14 修改

阅读量1.1k

点赞数 2

文章标签：前端 javascript vue.js

于 2024-03-21 09:37:21 首次发布

本文链接：https://blog.csdn.net/Sa883349/article/details/136896242

版权

本文介绍了如何在ElementUI的el-table组件中使用show-summary属性显示合计行，包括getSummaries函数的实现以及在页面缩放或开发者工具调整时，如何通过updated生命周期调用doLayout方法确保合计行正确显示。

摘要由CSDN通过智能技术生成

合计

头部

将show-summary设置为true就会在表格尾部展示合计行,

:summary-method="getSummaries", getSummaries 对合计进行处理，

:header-cell-style="{background:'#F5F5F5 !important',height:'0.48rem !important'}"对表格头部进行样式设置。

<el-table show-summary ref="ipstable" :summary-method="getSummaries"
   :data="tableData.slice((currpage - 1) * pagesize,
 currpage * pagesize)" :header-cell-style="{background:'#F5F5F5 
!important',height:'0.48rem !important'}"
style="width: 100%" height="calc(100vh - 3.1rem)" stripe>

对合计进行处理


// 合计功能 
            getSummaries(param) {
              const { columns, data } = param;
              const sums = [];
              // console.log(param);
              var that = this;
              columns.forEach((column, index) => {
                if (index === 0) {
                  sums[index] = '合计';
                  return;
                } else if (index === 5 || index === 6 || index === 7) {
                  
                  sums[index] = 0;
                  return;
                } else {
                  sums[index] = ' -- ';
                  return;
                }
              });

              sums[5] = "在线:" + that.total.status;
              sums[6] = "占用:" + that.total.use_status;
              sums[7] = "监控:" + that.total.agent_status;

              return sums;
            },

el-table合计行不显示，除页面缩放或者F12

解决方法：在updated生命周期中调用 doLayout

   updated() {
            this.$nextTick(() => {
              this.$refs.ipstable.doLayout();
              // console.log("do layout");
            });
          },