vue el-table 多选表格如何实现单选

需求：表格复选修改为单选，只可选择一个；

<el-table
    :empty-text="noDataText"
    :data="tableDatas"
    header-cell-class-name="DisableSelection "
    :max-height="600"
    ref="multipleTableRef"
    @select="select"
>
    <el-table-column type="selection" width="50"></el-table-column>
    <el-table-column prop="HotelId" label="酒店ID" min-width="60"></el-table-column>
    <el-table-column prop="HotelName" label="酒店名称" min-width="60"></el-table-column>
    <el-table-column prop="Longitude" label="酒店经度" min-width="50"></el-table-column>
    <el-table-column prop="Latitude" label="酒店纬度" min-width="50"></el-table-column>
    <el-table-column prop="Address" label="酒店地址" min-width="180"></el-table-column>
</el-table>

样式修改 多选框改成单选框,并把表头的全选按钮隐藏

表格复选改为单选

  /* 修改复选框样式 变成单选框样式 */
  /deep/ .el-checkbox__inner {
    border: 1px solid #dcdfe6;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    &::after {
      transform: translate(-50%, -50%) scale(1);
      width: 3px;
      height: 3px;
      border-radius: 100%;
      background-color: #fff;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transition: transform 0.15s ease-in;
    }
  }

隐藏表头的全选按钮

::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
    display: none !important;
    position: relative;
}
::v-deep .el-table .DisableSelection .cell:before {
    content: '';
    position: absolute;
}

利用Table Events

select(selection,row) 当用户手动勾选数据行的 Checkbox 时触发的事件

select(selections, row) {
    // 选择项大于1时
    if (selections.length > 1) {
        //用于多选表格，清空用户的选择
        this.$refs.multipleTableRef.clearSelection();
        // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        this.$refs.multipleTableRef.toggleRowSelection(row, true);
        selections.shift();
        this.selectedHotel = selections;
    } else {
        this.selectedHotel = selections;
    }
},