elementUI는 테이블 다중 선택을 사용하여 단일 선택을 실현합니다.
이것은 elementui의 형식 다중 선택입니다.
- 먼저 다중 선택 확인란을 숨깁니다.
::v-deep .el-table__header {
.el-checkbox {
display: none;
}
}
2. 테이블의 선택-변경 이벤트를 사용하여 단일 선택 달성
<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;
}
},
}
효과