elementUI用 table多选 实现单选
这是elementui的表格多选
首先隐藏掉多选checkbox
::v-deep .el-table__header {.el-checkbox {display: none;}}
2. 利用table 的selection-change 事件实现单选
<template><el-tableref="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;}},}
效果
