el-table表格实现单选

场景:

当你想要列表可选且只能选中一条的时候,你需要做:
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)
    }
  }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
el-table是Element UI中的一个表格组件,可以用于展示数据。要实现el-table选择框的单选功能,可以通过以下步骤进行操作: 1. 首先,在el-table的列定义中添加一个选择框列。可以使用el-table-column组件,并设置type属性为"selection",如下所示: ```html <el-table :data="tableData"> <el-table-column type="selection"></el-table-column> <!-- 其他列定义 --> </el-table> ``` 2. 接下来,在data中定义一个变量来存储选中的行数据。可以使用v-model指令将选中的行数据绑定到该变量上,如下所示: ```html <el-table :data="tableData" v-model="selectedRows"> <el-table-column type="selection"></el-table-column> <!-- 其他列定义 --> </el-table> <script> export default { data() { return { tableData: [], // 表格数据 selectedRows: [] // 存储选中的行数据 }; } }; </script> ``` 3. 最后,可以通过监听selection-change事件来获取选中的行数据。在事件处理函数中,将选中的行数据赋值给selectedRows变量,如下所示: ```html <el-table :data="tableData" v-model="selectedRows" @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <!-- 其他列定义 --> </el-table> <script> export default { data() { return { tableData: [], // 表格数据 selectedRows: [] // 存储选中的行数据 }; }, methods: { handleSelectionChange(selection) { this.selectedRows = selection; } } }; </script> ``` 这样,当用户在el-table中选择行时,selectedRows变量会自动更新为选中的行数据。你可以根据需要对selectedRows进行进一步处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_小郑有点困了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值