ElementUI中的el-table怎样实现单选

效果

<el-table v-loading="loading" :data="kqryszList" @selection-change="handleSelectionChange" ref="tb" > 
	<el-table-column type="selection" width="55" align="center" /> 
	<el-table-column label="工号" align="center" prop="gh" /> 
</el-table>
//1.与实现多选类似,需要添加一列类型为selection。

//2.除了设置其选项改变事件外,还需要设置其ref属性。

//3.设置ref的目的是能在方法中通过this.$refs.tb获取这个table

//4.在方法handleSelectionChange中

// 单选框选中数据 
handleSelectionChange(selection) { 
	this.checkedGh = selection[0].gh; 
	if (selection.length > 1) { 
		this.$refs.tb.clearSelection(); 
		this.$refs.tb.toggleRowSelection(selection.pop()); 
	} 
},
//此方法的实现逻辑就是,通过设置的ref属性和 this.$refs.tb来获取这个table,
//然后判断选择项的数组selection的长度大于1的话就清除数组并设置选择最后一次选中的项。
//并且通过this.checkedGh = selection[0].gh;获取选项行的gh属性的值。

//其中checkedGh需要提前在data() { return { //选中的工号 checkedGh: [],声明。

你可能感兴趣的:(elementui,前端,vue,el-table,单选)