element plus el-table 实现单选较简单写法

element plus el-table 其实官网是有实现单选的配置选项的，就是通过highlight-current-row和 current-change实现的，只不过，他是通过高亮实现选中状态的，感觉对用户来说不是很明显。下面是一种左侧仍显示选择框的一种较简单写法。

<el-table
   class="single-select"
   ref="tableRef"
   @selection-change="handleSelectionChange"
>

    <el-table-column type="selection" />
    <el-table-column label="序号" type="index" />
    <el-table-column label="商品编码" prop="skuCode"  />
    <el-table-column label="商品名称" prop="skuName/>
</el-table>

tableRef = ref()

function handleSelectionChange(val) {
    if (val.length >= 2) {
      const lastIndex = val.length - 1
      // 清空所有已选择的，然后选最后一项
      unref(tableRef)?.clearSelection()
      unref(tableRef)?.toggleRowSelection(val[lastIndex])
      val = [val[lastIndex]]
    }
    aSelect.value = val
}

// 通过样式隐藏头部全选按钮
.single-select :deep(.el-table__header) {
    .el-checkbox {
      display: none;
    }
  }