在vue项目中遇到一个需求是要展示单选表格的。
代码如下：
<template>
<el-radio-group v-model="radioGroup">
<el-table :data="tableData" border style="width: 600px; margin: 20px">
<el-table-column align="center" width="30">
<template slot-scope="scoped">
<el-radio @click.native.stop="handRadio" :label="scoped.row">
</el-radio>
</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>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
radioGroup: {},
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 弄",
},
],
};
},
watch: {
'radioGroup': {
handler(val) {
console.log("radioGroup:", this.radioGroup);
},
},
},
methods: {
// 阻止单选冒泡 此处是在做行点击事件时阻止事件冒泡。
handRadio() {},
},
};
</script>
仅个人见解，不喜勿喷。
