el-table中实现单选按钮

其实element本身是有提供单选这个功能的，只是效果不太明显…用色块表示…

我比较俗…喜欢这种直截了当一眼就知道我选中它了的…

所以就结合它本身的单选功能和el-radio拼一拼…
上菜…哦不…上码

 <el-table max-height="300" :data="list" highlight-current-row @row-click="rowClick">
 	<el-table-column label width="35">
    	<template slot-scope="scope">
        	<el-radio :label="scope.row.name" v-model="radioId">&nbsp;</el-radio>
        </template>
    </el-table-column>
    <el-table-column label="序号" width="120" prop="account"></el-table-column>
    <el-table-column label="照片" width="100">
    	<template slot-scope="scope">
        	<img class="img-url" :src="scope.row.url" alt="">
       	</template>
    </el-table-column>
    <el-table-column label="姓名" width="100" prop="name"></el-table-column>
    <el-table-column label="性别" width="100" prop="sex"></el-table-column>
    <el-table-column label="部门" width="100" prop="department"></el-table-column>
    <el-table-column label="岗位" width="100" prop="job"></el-table-column>
</el-table>
<script>
	export default{
		methods:{
			rowClick(row){
				this.radioId=row.name;
			}
		}
	}
</script>

PS:因为前面虽然加了单选按钮，但是只要点击单选按钮才会选中，而如果点击的是这一行的其它地方，是不会选中单选按钮的，但是el-table有个选中行的点击事件@row-click，在这里借助它，当点击行的时候选中单选按钮。

今天天气不错哈哈，祝开心摸鱼。