在el-tab 里面会遇到表格数据合并某一列的数值和

在el-tab 里面添加下列方法

<el-table 
          ref="list" 
          v-loading="loading" 
          :data="quantityAcceptJGList"
          @selection-change="handleSelectionChange"
          :max-height="maxHeight" :height="maxHeight"
          //某一列的数值和
          show-summary
          :summary-method="getSummaries"
          // 某一列的数值和
          >
          

在方法里面写入下方方法

     getSummaries(options) {
      const { columns, data } = options;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          return;
          //index === 22 || index === 24 || index === 28  这是表格第几列需要合计值
          // 例如只需要第3列的值求和，index===3
        } else if (index === 22 || index === 24 || index === 28) {
          console.log(data.map((item) => item[column.property]));
          const values = data.map((item) => Number(item[column.property]));

          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return Math.floor((prev + curr) * 100) / 100;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = "N/A";
          }
        }
        if (index === 0) {
          sums[index] = '合计';
        }
      });

      return sums;
    },

表格固定了高度，合计行的显示，时有时无，很不稳定。首次调用接口时列表合计行未显示，缩放页面或者切换页签二次调用接口时又出现

解决办法

 updated() {
    this.$nextTick(() => {
    // tab 绑定ref 属性
      this.$refs["list"].doLayout();
    });
  },

updated() 解释

只有data里的变量改变并且要在页面重新渲染完成之后,
才会进updated生命周期，
只改变data里的值但是没有再页面上渲染该值的话并不会触发updated方法。
Vue中updated和watch的区别
watch:
1.仅仅是数据发生改变的时候会侦听到
2.只是会检测到你写在watch里的那些属性,没写的就不会触发
updated:
1.执行到它的时候时候是数据发生变化且界面更新完毕
3.所有的数据发生变化都会调用
4.每次触发的代码都是同一个

vue/element ui表单数据修改，导致页面列表数据被同步修改问题的解决。

在vue的项目开发中，有时候在表单提交的时候，尤其是页面中对话层编辑数据，在修改的时候，会看到列表页面的数据也在跟着改变，这是vue 的双向数据绑定的弊端，实时更新数据，因为是一个数据源，因为在修改对象的时候，对象的指针直接指向页面数据 了，解决办法是：

在修改的时候，会获取到当前行的对象数据，那么我们不是直接赋值给我们的页面对象数据，而是：

this.addRoleFrom =JSON.parse(JSON.stringify(row)) // 改过之后的
this.addRoleFrom =row // 原来的