el-table表格实现单选

场景:

当你想要列表可选且只能选中一条的时候,你需要做:
1,隐藏表头全选checkBox
2,实现单选

效果图:
el-table表格实现单选_第1张图片

一:隐藏全选框
/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)
    }
  }

你可能感兴趣的:(elementui,vue,elementui,vue.js)