el-table 单选

简单来说,就是把el-table的多选改成单选

效果图.png

<el-table
   v-loading="loading"
   :data="list"
   class="typeTable"
   @select="handleSelectionChange"
 >
  <el-table-column
      type="selection"
      width="55"
      align="center"
    />
  <el-table-column
      label="XXXX"
      align="center"
      prop="XXX"
   />
</el-table>

// 选中数据
//原理就是取消所有选择，再选中点击的，达到单选效果
handleSelectionChange(selection) {
 if (selection.length > 1) {
   this.$refs.typeTable.clearSelection();
   this.$refs.typeTable.toggleRowSelection(selection.pop());
 }
}

//隐藏全选框
.typeTable {
  ::v-deep .el-table__header-wrapper {
    .el-table-column--selection {
      .el-checkbox {
        display: none !important;
      }
    }
  }
}