elementUI表格复选框只能选中一个

文章描述了在使用ElementUI的el-table组件时如何配置以实现只能选择一条数据的功能。当用户尝试选中多条时,系统会自动切换到当前选中的行,清除之前的选中状态。主要涉及的方法有`toggleRowSelection`和`clearSelection`。
摘要由CSDN通过智能技术生成

由于业务需要,使用elementui的el-table组件时,只能勾选一条数据,如果选中多条,默认变为当前这条,之前勾选的默认清空

  <el-table
     :data="sarAccessListDatas"
     tooltip-effect="dark"
     style="width: 100%"
     border
     height="100%"
     :header-cell-style="{
      background: '#f5f1f1',
      color: '#333333', 
      fontSize: '16px',
      fontWeight: 'bold', 
      height: '48px'}"
     @row-click="rowClick"
     @select="select"
     @selection-change="selectListChange"
     ref="detailedSelection"
   >
   <el-table>
// 表格某一行的单击事件
rowClick(row, column) {
  const selectData = this.selectList
  this.$refs.detailedSelection.clearSelection()
  if( selectData.length === 1 ) {
    selectData.forEach(item => {
      // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
      if (item === row) {
        this.$refs.detailedSelection.toggleRowSelection(row, false);
      }
      // 不然就让当前的一行勾选
      else {
        this.$refs.detailedSelection.toggleRowSelection(row, true);
      }
    })
  }
  else {
    this.$refs.detailedSelection.toggleRowSelection(row, true);
  }
},
select(selection, row) {
  // 清除 所有勾选项
  this.$refs.detailedSelection.clearSelection()
  // 当表格数据都没有被勾选的时候 就返回
  // 主要用于将当前勾选的表格状态清除
  if(selection.length === 0) return
  this.$refs.detailedSelection.toggleRowSelection(row, true)
},
//选择清单选择框改变
selectListChange(data) {
  this.selectedList = [];
  for (let i = 0; i < data.length; i++) {
    this.selectedList.push(data[0]);
  }
},

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值