Vue ElementUI el-tree 添加单选按钮 el-radio 效果

背景

需要显示列表做单选效果；

效果

代码

• 代码第 6 行，使用 el-table 的单行点击事件 row-click；
• 代码第 7 - 13 行，设置单选按钮。注意 radio 的属性 lable 是整条记录，但要隐藏，详见隐藏代码 54 - 56 行；
• 注意代码第 9 行，设置 @click.stop 阻止点击 radio 后向上冒泡，从而避免方法 rowClick 执行两次。el-radio 的 change事件必须设置，否则无选中效果；

<template>
    <el-table 
		border
        :data="tableData"
        style="width: 50%;margin:10px;"
		@row-click="rowClick" >
		<el-table-column label="选择" width="60" align="center">
			<template slot-scope="scope">
				<span @click.stop>
					<el-radio class="my-radio" v-model="myRadio" :label="scope.row" @change="rowClick(scope.row)"></el-radio>
				</span>
			</template>
		</el-table-column>
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
</template>

<script>
export default {
	data() {
        return {
			myRadio: null,
			tableData: [{
				date: '2016-05-02',
				name: '张三',
				address: '上海市普陀区金沙江路 1518 弄'
			}, {
				date: '2016-05-04',
				name: '李四',
				address: '上海市普陀区金沙江路 1517 弄'
			}, {
				date: '2016-05-01',
				name: '王五',
				address: '上海市普陀区金沙江路 1519 弄'
			}, {
				date: '2016-05-03',
				name: '刘大',
				address: '上海市普陀区金沙江路 1516 弄'
			}]
        }
	},
	methods: {
		// 选择角色
		rowClick (row) {
			console.log('选中：', row.name);
			this.myRadio = row;
		}
	}
}
</script>
<style >
.my-radio .el-radio__label {
	display: none;
}
</style>