element-ui只提供了表格多选,表格单选 通过样式控制
/* 隐藏全选 */
::v-deep .el-table .el-table__header .el-checkbox {
display: none;
}
样式控制完成,不代表勾选显示的只会勾选一个,还需要在@select方法里面添加判断条件
<el-table
ref="table"
:data="tableDataList"
:header-cell-style="{ background: '#F5F7FA', height: '30px' }"
style="width: 100%; margin: 0 auto"
height="100%"
align="center"
row-key="node_code"
stripe
border
@select="handleSelect"
>
<el-table-column type="selection" width="55" />
...
</el-table>
selectRow:{} //存数据的
//勾选事件
handleSelect(selection, row) {
this.$refs.table.clearSelection() //清空勾选框
if (this.selectRow.id == row.id) {
this.$refs.table.toggleRowSelection(row, false)
this.selectRow = {}
} else {
this.$refs.table.toggleRowSelection(row)
this.selectRow = { ...row }
}
},
这样勾选切换的时候 只会勾选一个选项了