element-ui实现带单选框的表格

为了方便操作表格中的某一条数据

 实现效果：在表格中只能选中某一条数据，进行下一步的操作。

 首先扒拉扒拉element的官方文档有没有属性能直接实现。

嗯，没有。于是开始面向百度编程，大概是这两种方法

一.结合Radio组件来实现

个人觉得好多写的都比较麻烦。这位老哥写的较为简易，亲测可行 

element-ui table 表格控件实现单选功能_elementui table单选-CSDN博客

二.使用table组件自身的row-click方法和selection-change方法

直接上代码

    <div style="width: 80%;margin:100px auto;">
		<template>
			<el-table
			    ref="radioTable"
			    :data="tableData"
			    :header-cell-style="{background:'#eef1f6',color:'#909399'}"
			    border
			    style="width: 100%"
			    fixed
			    @row-click="rowClick"
			    @selection-change="selectionChange"
			    stripe>
		        <el-table-column
		            type="selection">
		        </el-table-column>
		        <el-table-column
		            prop="label"
		            label="姓名"
		            >
		        </el-table-column>
		        <el-table-column
		            prop="value"
		            label="年龄"
		            >
		        </el-table-column>
			</el-table>
		</template>
	</div>

给一些数据和一个用来接收选中行数据的对象selectData 

        data:{
			tableData:[
				{
					label:'这是张三',
					value:'18'
				},
				{
					label:'这是李四',
					value:'20'
				},
				{
					label:'这是王五',
					value:'21'
				}
			],
			selectData :{},
		},

 methods方法：

    // 表格的选中 可以获得当前选中的数据
	selectionChange(val) {
		if(val.length>1){
			this.$refs.radioTable.clearSelection()
			this.$refs.radioTable.toggleRowSelection(val.pop())
		}else{
			this.selectData=val.pop()
		}
	},
	// 表格某一行的单击事件
	rowClick(row, column) {
		this.$refs.radioTable.toggleRowSelection(row)
	}

再把复选框变成圈圈并隐藏掉表头的框框

        .el-table__header .el-table-column--selection .cell .el-checkbox {
			display:none
		}
		.el-table-column--selection .cell{
			text-align: center;
		}
		.el-checkbox__input .el-checkbox__inner{
			border-radius: 50%;
		}

如此这般。