ElementUI表格实现只能单选效果

ElementUI表格实现只能单选效果

设置样式隐藏表格全选

<style>
.single-select-table thead .el-table-column--selection .cell {
  display: none;
}
</style>

table设置隐藏全选样式，加上@selection-change="handleSelectionChange"实现单选，ref设置个table作为ref引用

<el-table :data="page.rows" ref="table" border tooltip-effect="light" @selection-change="handleSelectionChange" class="single-select-table">
        <!--选择框勾选-->
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="产品编码" prop="objId"></el-table-column>
        <el-table-column label="xml" prop="fileCName"></el-table-column>
        <el-table-column label="创建人" prop="creator"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="修改人" prop="modifier"></el-table-column>
        <el-table-column label="修改时间" prop="modifyTime"></el-table-column>
      </el-table>

handleSelectionChange方法具体实现

handleSelectionChange(rows) {
      if (rows.length > 1) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(rows.pop())
      }
    },