Vue el-table 表格第一列序号与复选框hover切换

前言

项目中用vue element el-table , 表格的第一列为鼠标经过时切换显示序号与复选框 , 不影响当前行的点击事件 , 如跳转详情等操作

老规矩,先上效果图

HTML

<el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      @cell-mouse-enter="cellEnter"
      @cell-mouse-leave="cellLeave"
      @selection-change="handleSelectionChange"
      @row-click="toDeatils"
    >
      <el-table-column type="selection" width="50" align="left">
        <template #default="{ row, $index }">
          <div
            v-if="columnCh