前端数据处理 , 数据排序 , table 数据整理 ,el-table根据数据动态合并单元格

最近被一个小小的前端数据处理脑子整的有点糊了，就是在大脑里整个的思路很简单，但是写完代码一跑确有问题，顿时陷入了思路和代码实现的对抗，改来改去最终是我总结的是对嵌套的for 循环不仔细分析是很容易出问题的。记录一下脑子糊了之后走不动的感受，教训是要慢下来，对自己的每一部分代码进行思路对应的检查。

第一版需求：

Select 病种选择，选择的数据在table 中进行展示，一类病种只能选择同一个医院，因此选择后的同类病种要放在一行中，数据展示按照选择的顺序展示，每一个病种可以单独删除。最终的效果图如下

实现思路，选择框选择的病种会选择到一个集合中，根据选择的集合，根据病种分类整理适合table 展示的数据，监听select控件的change时间，实现选择数据和下方table 的联动。每次change 都会按照当前的选择重新整合table 数据。

以上思路增加选择项的时候确实没有问题，按照选择的顺序 逆序删除也没有问题，但是选择框中的数据是按照选择顺序加入的，但是同类病种如果最先加入的被删除，change 时间触发后再整理table 数据，会导致table 原有数据上下行的交替，这种效果显然不符合正常的显示逻辑。

解决思路：

在整理table 数据之前，首先要把table 中已有的数据放在最前面，之后把新增的数据放在后面，再按照顺序整理table 数据

具体代码如下：

<template>
  <div class="containerbox">
    <el-select
      v-model="selectedDiseases"
      @change="changeDisease"
      value-key="diseaseNo"
      multiple
      collapse-tags
      style="margin-left: 20px;"
      placeholder="请选择申请病重"
      :multiple-limit="8"
      popper-class="sort_select"
    >
      <el-option v-for="item in allDisease" :key="item.diseaseNo" :label="item.diseaseName" :value="item"> </el-option>
    </el-select>

    <el-table :data="tableData" style="width: 100%" border center>
      <el-table-column label="选择申请病种" :min-width="180" align="center">
        <template slot-scope="scope">
          <!--  -->
          <span class="diseaseItem" v-for="item in scope.row.itemInfo" :key="item.diseaseNo"
            >{
  { item.diseaseName }}
            <el-button type="text" class="el-icon-remove-outline" @click="removeDisease(item)"></el-button>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="fixhospitalName" label="选择医院" :min-width="180" align="center"> </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="chooseHospital(scope.row)">请选择医院</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<scrip