需求场景：
需求：表格复选修改为单选，只可选择一个；不满足条件的不可勾选；可进行整行操作
vue中的el-table布局：
注意使用的方法．
<el-table
ref="tableRef"
:key="tableKey"
:data="tableData"
class="singleTable"
@select="handleSelectionChange"
@row-click="handleSelectionChange('',$event)">
<el-table-column
type="selection"
width="45"
align="center"
:selectable="checkboxSelect"/>
<el-table-column label="序号" width="60" show-overflow-tooltip align="center">
<template slot-scope="scope">{{ scope.$index + (page.pageNum - 1) *page.pageSize + 1 }}</template>
</el-table-column>
<el-table-column prop="RANINSTASKNAME" label="名称" show-overflow-tooltip/>
<el-table-column prop="ADDRESS" label="地址" show-overflow-tooltip/>
</el-table>单选样式
需求由复选改为单选后，左上角全选框要进行隐藏，复选框也变成单选框，这里是通过css样式进行调整的
// 隐藏表头全选复选框
//（主要目的就是隐藏全选复选框，亲测具体项目细节不同可能实现方式不同，如果不生效需要调整下）
/deep/ .el-table thead { // 第一种
.el-checkbox__input {
display: none !important;
}
}
/deep/ .el-table__header-wrapper .el-checkbox { // 第二种
display: none !important;
}
//表格复选改为单选
.singleTable {
/* 修改复选框样式 变成单选框样式 */
/deep/ .el-checkbox__inner {
border: 1px solid #dcdfe6;
border-radius: 100%;
width: 14px;
height: 14px;
position: relative;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
&::after {
transform: translate(-50%, -50%) scale(1);
width: 3px;
height: 3px;
border-radius: 100%;
background-color: #fff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transition: transform 0.15s ease-in;
}
}
}勾选数据触发方法：
勾选复选框的select和整行操作的row-click可以共用同一个方法，但是要注意传参．select事件默认传参是（selection, row），而row-click触发事件的第一个默认传参是( row ),所以row-click时间在共用方法时要特殊传参（@row-click="handleSelectionChange('',$event)"）文章来源：https://www.toymoban.com/news/detail-629857.html
handleSelectionChange (selection, row) {
if (row.noChoose) return //不满足条件数据不可操作
this.$refs.tableRef.clearSelection()
// 这里因为需求做的是必选一个，如有其他需求可做调整
this.$refs.tableRef.toggleRowSelection(row, true)
this.selections = row
},控制数据是否可勾选：
可以在selection中使用selectable参数的回调函数处理文章来源地址https://www.toymoban.com/news/detail-629857.html
checkboxSelect (row) {
//不符合条件的不允许勾选
return !row.isChoose
}到了这里，关于vue使用Element UI时，el-table表格整行操作单选的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
