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

背景

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

效果

Vue ElementUI el-tree 添加单选按钮 el-radio 效果_第1张图片

代码

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

你可能感兴趣的:(ElementUI,vue.js,elementui,radio,table)