VUE3 Element-Plus El-Table Fixed列修改背景色问题

需求：带有checkbox的el-table，选中行变色 ，鼠标经过的行变色
阻碍：fixed列不是以单元格为单位是以列为单位

解决方法：大概思路是在fixed列单元格中加一个div 顶满显示,然后这个div是否发挥作用的依据是选中checkbox会把该行的一个flag更新，通过判断这个flag是否使div发挥作用，hover也是一样 把fixed列单元格内的div在hover的css中写一份 鼠标经过hover发挥作用 相关hover内的css也发挥作用

刚开始写，条理不是很清晰，请见谅 有啥问题或者不足请评论指出！！！

以下是相关代码：

<el-table
    :data="mrMessTableDatas"
    :row-style="rowStyleDisplay">
    <el-table-column prop="soCode" fixed width="200" label="大副收据" sortable>
      <template #default="scope">
        <div
          :class="scope.row.selectChecked == true ? 'selectCheckedHover' : ''"
        >
          <el-popover
            placement="top-start"
            :width="150"
            trigger="hover"
            :content="scope.row.soCode"
            effect="dark"
          >
            <template #reference>
              <span class="inputnum-style">{{ scope.row.soCode }}</span>
            </template>
          </el-popover>
        </div>
      </template>
    </el-table-column>
</el-table>

const rowStyleDisplay = ({row,rowIndex}: {
  row: mrMessTable;
  rowIndex: number;
}) => {
  const checkIdList = multipleSelection.value.map((item: any) => item.id);
  if (checkIdList.includes(row.id)) {
    row.selectChecked = true;
    return {
      "background-color": "#d9ecff",
    };
  } else {
    row.selectChecked = false;
  }
};

:deep(.el-table__body tr:hover > td) {
  background-color: #3dc7ab !important;
  .selectCheckedHover {
    background-color: #3dc7ab !important;
    height: 45px;
    width: 200px;
    padding-top: 11px;
  }
}

:deep(.el-checkbox) {
  --el-checkbox-bg-color: #cfefa0b0;
}

.selectCheckedHover {
  background-color: #d9ecff;
  height: 45px;
  width: 200px;
  padding-top: 11px;
}