[大数据]vxe-table合并单元格后增加选中效果

<vxe-table
      :data="retrievalList"
      :row-class-name="setRowClass"
       @cell-click="selectRow">
     <vxe-column field="name" title="姓名"></vxe-column>
</vxe-table>

后端返回的JSON格式 (合并单元格需要对数据处理后，通过setMergeCells合并)

注：

相关单元格全部选中

效果图：

 data() {
    return {
    	sourceList: [],  //  后端返回的JSON数据
        retrievalList: [],  //  格式化后的数据 [{},{},{}]
    }
 },
 methods: {
	//  设置已选中的单元格类名
    setRowClass({row}) {
      //  patId为JSON外层唯一主键，选中后根据主键动态设置类
      if (row.patId === this.currentRow.patId) {
        return 'current-pat';
      }
    },
    //  单击选中
    selectRow({row}) {
      //  获取当前合并的单元格整体信息，此处为多条数据的集合
      this.currentRow = this.sourceList.find(item => item.patId === row.patId);
    }
 }

//  scss
.vxe-table {
      .current-pat, .current-pat > td {
        background-color: #CBECFC !important;
      }
}

所选单元格整体增加背景色，但仅选中单元格特殊标识

注 ：
（1）第一列被合并单元格选中样式默认跟随合并后的第一行。
（2）可自行变形，使首列单元格底色与单项选中的单元格一致。
（3）此处存在个BUG，首次点击单元格时未出现选中效果；由于已选择第一种方案，此处未深究，仅做记录。

 data() {
    return {
    	sourceList: [],  //  后端返回的JSON数据
        retrievalList: [],  //  格式化后的数据 [{},{},{}]
    }
 },
 methods: {
	//  设置行类名
    setRowClass({row}) {
      if (row.itemId === this.firstItemId) {
      	//  itemId为JSON内层nurseOptPatVoList内唯一主键，用于设置被合并列单元格底色
        return 'current-first'
      } else if (row.patId === this.currentRow.patId) {
        //  patId为JSON外层唯一主键，选中后根据主键动态设置类
        return 'current-pat'
      }
    },
    //  单击选中
    selectRow({row}) {
      //  获取当前合并的单元格整体信息，此处为多条数据的集合
      this.currentRow = this.sourceList.find(item => item.patId === row.patId);
      //  获取当前合并的单元格首条信息
      let firstItem = this.retrievalList.find(item => item.patId === row.patId);
      this.firstItemId = firstItem.itemId;
    }

.vxe-table {
      .current-pat {
        background-color: #f00;
      }

      .current-first {
        // 此处不使用important是为了避免背景与选中效果冲突
        background-color: #f00; 

        & > .vxe-body--column:first-child {
          background-color: #f00 !important;
        }
      }
}