场景:
当你想要列表可选且只能选中一条的时候,你需要做:
1,隐藏表头全选checkBox
2,实现单选
效果图:
一:隐藏全选框
/deep/ .el-table__header-wrapper .el-checkbox{//找到表头,然后隐藏掉复选框
display:none
}
二:实现单选
html:
<el-table
border
:key="4"
height="450px"
@select="simpleCheck"
@selection-change="handleSelectionChange"
ref="tableMain"
:data="GETParkingOrderReport.output.value.rows">
<el-table-column
type="selection"
width="35">
</el-table-column>
<el-table-column prop="parkingOrderId" label="订单号"></el-table-column>
</el-table>
methods:
simpleCheck(selection, row){
this.$refs.tableMain.clearSelection()
if (selection.length === 0) {
// 判断selection是否有值存在
//反选的时候清空
this.POSTAppealData.input.parkingOrderId = undefined
return
}
if (row) {
//this.POSTAppealData.input.parkingOrderId:这是你要使用的项或值
this.POSTAppealData.input.parkingOrderId = row.id
this.$refs.tableMain.toggleRowSelection(row, true)
}
}