elementUI用 table多选 实现单选
这是elementui的表格多选
- 首先隐藏掉多选checkbox
::v-deep .el-table__header {
.el-checkbox {
display: none;
}
}
2. 利用table 的selection-change 事件实现单选
<template>
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%;"
class="exam_table"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="角色名称" min-width="120" prop="name">
</el-table-column>
<el-table-column prop="num" label="成员数量" min-width="120">
</el-table-column>
</el-table>
</template>
data(){
return {
tableSelect:[]
}
},
methods:{
handleSelectionChange(val) {
if (val.length > 1) {
this.$refs.multipleTable.clearSelection();
this.$refs.multipleTable.toggleRowSelection(val.pop());
} else {
this.tableSelect = val;
}
},
}
效果