设置ElementUI表格只能单选效果教程

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型.

设置样式隐藏表格上面总的选框

thead .el-table-column--selection .cell{ display: none;
}

  

 

  
1
  
2
  
3
 

table加上@selection-change="handleSelectionChange"，ref设置个Table作为ref引用

<el-table
	ref="Table"
	:data="apprItemData"
	:header-cell-style="headClass" @selection-change="handleSelectionChange" row-key="apprItem" :tree-props="{children: 'children'}" height="420"
	border>
</el-table>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

methods加上方法：

 handleSelectionChange(val){
	console.log("selection rows:"+val); if (val.length > 1) { this.$refs.Table.clearSelection() this.$refs.Table.toggleRowSelection(val.pop()) }
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

文章来源: smilenicky.blog.csdn.net，作者：smileNicky，版权归原作者所有，如需转载，请联系作者。

原文链接：smilenicky.blog.csdn.net/article/details/117457242