elementUI表格下拉引发的一系列问题

纯记录一下下我的代码，当作日记好了，第一次独立开发遇到的问题太多，就想着拜托拜托，一定要解决，如果解决了我就一定写一篇记录一下，然后第一篇就这样诞生了。。。

初始界面

按照时间段查询出所有设备的合计，然后点击详情出现该项的详细信息
看需求貌似是个很好实现的功能，但是我居然搞了一个多礼拜😭😭，第一是因为其他一些事耽误了，第二我觉得是我蠢，第三还是我蠢😭

我来罗列一下期间出现的各种问题

1. 表格的错乱
   看着着实的难受，这个问题就解决了两天。。。因为之前也有一个页面需要动态合并单元格，所以这个页面就偷了个懒，直接ctrl+C,ctrl+V了
   

// An highlighted block
 <el-table :data="list" :model="list" border :span-method="this.merge ? this.mergeMethod : this.spanMethod">

data(){
	return{
	   merge: ["Name"],
       mergeLine: {},
       mergeIndex: {},
       spanMethod: Function,
	}
}

async todayInfoList(params){
      let res = await postCopyInfoList(params);
      if (res.code === 200) {
        this.tableData=res.data;
        this.getMergeArr(this.tableData, this.merge);
	    ....
      }
    },
getMergeArr(tableData, merge) {
      if (!merge) return;
      this.mergeLine = {};
      this.mergeIndex = {};
      merge.forEach((item, k) => {
        tableData.forEach((data, i) => {
          if (i === 0) {
            this.mergeIndex[item] = this.mergeIndex[item] || [];
            this.mergeIndex[item].push(1);
            this.mergeLine[item] = 0;
          } else {
            if (data[item] === tableData[i - 1][item]) {
              this.mergeIndex[item][this.mergeLine[item]] += 1;
              this.mergeIndex[item].push(0);
            } else {
              this.mergeIndex[item].push(1);
              this.mergeLine[item] = i;
            }
          }
        });
      });
    },
    //合并单元格
    mergeMethod({ row, column, rowIndex, columnIndex }) {
      const index = this.merge.indexOf(column.property);
      if (index > -1) {
        const _row = this.mergeIndex[this.merge[index]][rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },

这种适合合并量大的时候使用，不过我也不知道为什么用在这个页面就不行了，我也没去找原因，最终参考了一篇，很抱歉那篇文章找不到了，也不知道该不该贴上来，但是秉着这是一篇日记，我就贴上来了，如果原作者看到了，不想要这样出现的话，我就设置仅自己看吧。

以下是解决了错位问题的代码

// An highlighted block
<el-table :data="newTable" :model="newTable" border :span-method="objectSpanMethod">

    mergeComon(name,rowIndex){
      var equName=this.newTable[rowIndex][id];
      if(rowIndex>0){
        if(this.newTable[rowIndex][id] != this.newTable[rowIndex-1][id]){
          var i = rowIndex,num = 0;
          while(i<this.newTable.length){
            if(this.newTable[i][id] === equName){
              i++;
              num++;
            }else{
              i=this.newTable.length
            }
          }
          return {
            rowspan:num,
            colspan:1
          }
        }else{
          return{
            rowspan:0,
            colspan:1
          }
        }
      }else{
        var i = rowIndex,num = 0;
        while(i<this.newTable.length){
          if(this.newTable[i][id] === equName){
            i++;
            num++;
          }else{
            i=this.newTable.length
          }
        }
        return {
          rowspan:num,
          colspan:1
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      switch(columnIndex){
        case 0:
        return this.mergeComon('Name',rowIndex);
      }
    },

2. 下面的就到了最最最坑的地方了，又找了两天，就在今天终于找到了问题所在 ！！！！

图中出现的问题是：依次从上往下点击“详情”按钮，第一个是正常的，从第二个开始，点击获取的都为再下一个的信息，例如点击“娃娃机合计合计”，打印出的equipmentName字段应为“娃娃机合计合计”，但是却变成了“篮球机合计合计”。哇塞，这真的让我一顿好找

一开始表格先渲染出所有合计，然后点击详情，调相同的接口，然后返回我单独的详情，我splice进入原数组，然后再渲染，一开始很怕是splice的原因，所以问题定位错误，就一个劲的看splice引发的问题。中途就因为定位错误好几次，耽误了好久，最终在今天一开窍，才想起来要打印看看每次点击之后原数组的变化，天！我个猪脑子。。。

最后发现打印出来的数组没有一点问题，就点击的时候出现了问题，最后才把关键锁在了按钮上

// An highlighted block
<el-table-column label="设备自定义名称" prop="equipmentName">
  <template slot-scope="scope">
    {{ scope.row.equipmentName }}
    <el-button type="text" v-if="props.row.equipmentName.indexOf('合计') !== -1" @click.once="goToDetail(scope.row)">详情></el-button>
  </template>
</el-table-column>

因为按钮只能点击一次，所以使用了 .once，后来想到了el-button 是自定义组件，组件绑定当前组件的事件是不会触发的，然后就是觉得自己更蠢的时刻到了，没错，就换成了 .native就好了。。。

// An highlighted block
    <el-button type="text" v-if="props.row.equipmentName.indexOf('合计') !== -1" @click.native="goToDetail(scope.row)">详情></el-button>

好了，今日唠嗑到此结束，这就是一篇记录自己代码的日记，如果觉得哪儿写的不好，欢迎指指点点，但希望善良点对待我，我还只是个孩子，谢谢