el-table组件多选实现单选功能
在使用 el-table组件时为了实现仅能选中表格中的一条数据可将el-table组件多选功能进行改造,从而实现单选功能。
实现效果
实现步骤
1、添加selection-change方法
<el-table
ref="refsTable"
:data="projectData"
border
v-loading="loading"
@selection-change="handleSelectionChange"
style="width: 100%"
>
handleSelectionChange(selection) {
this.ids = [];
if (selection.length > 1) {
//移除上一次选中行数据
selection.shift();
//修改选中图标为未选中状态
this.$refs.refsTable.clearSelection();
//将当前选中行改为选中状态
this.$refs.refsTable.toggleRowSelection(selection[0]);
}
},
2、找到表头那一行,然后把里面的复选框隐藏掉
<style lang="scss" scoped>
/**找到表头那一行,然后把里面的复选框隐藏掉**/
::v-deep .el-table__header-wrapper .el-table__header .el-checkbox {
display: none;
}
</style>