# el-table 多选表格实现单选

xcooo

html 部分

<el-table id="tables" ref="multipleTable" row-key="id" 
    :data="tableData" 
     max-height="450" 
     border 
     style="width: 100%" 
     @selection-change="handleSelectionChange"  // 使用此方法  ⭐⭐⭐
     :header-cell-style="{background:'#F8F8FA',color:'#606266',fontSize:'13px',fontWeight:'bold'}"
   >
     <el-table-column type="selection" width="60" align="center" :reserve-selection="true"></el-table-column>
     <el-table-column prop="id" label="序号" width="120" align="center"> </el-table-column>
     <el-table-column prop="name" label="话题名称" align="center" show-overflow-tooltip> </el-table-column>
 </el-table>
1
2
3
4
5
6
7
8
9
10
11
12

js部分

handleSelectionChange(val) {
  if(val.length >=2){
     // 删除索引为0的
     // console.log(val.splice(0,val.length-1),'被删除的')
     let arrays = val.splice(0,val.length-1)
     arrays.forEach(row => {
       this.$refs.multipleTable.toggleRowSelection(row); //除了当前点击的,其他的全部取消选中
     })
  }
  // console.log(val,'最后得到的')this.array = val
}
1
2
3
4
5
6
7
8
9
10
11

可能你需要隐藏掉标头的全选全不选(毕竟全选已经没啥用了)

thead .el-table-column--selection .cell{
    display: none;
}
1
2
3
上次更新: 2020/10/23 下午7:23:27