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

时间:2025-03-28 13:57:58

由于业务需要,使用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.$()
  if(  === 1 ) {
    (item => {
      // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
      if (item === row) {
        this.$(row, false);
      }
      // 不然就让当前的一行勾选
      else {
        this.$(row, true);
      }
    })
  }
  else {
    this.$(row, true);
  }
},
select(selection, row) {
  // 清除 所有勾选项
  this.$()
  // 当表格数据都没有被勾选的时候 就返回
  // 主要用于将当前勾选的表格状态清除
  if( === 0) return
  this.$(row, true)
},
//选择清单选择框改变
selectListChange(data) {
   = [];
  for (let i = 0; i < ; i++) {
    (data[0]);
  }
},