//关键点:label一定要写对,并且不能有重复的,radio的值一定是惟一的,
<template>
<div>
<el-table
:data="tableData"
style="width: 100%"
:row-key="getRowKey"
@row-click="onselectionchange"
>
<!-- @current-change="handleSelectionChange" -->
<el-table-column width="180">
<template slot-scope="scope">
<el-radio v-model="radioData" :label="scope.row.address">
<span style="color: red"></span
></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>
</div>
</template>
<script>
export default {
data() {
return {
radioData: "",
tableData: [
{
id: "1",
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "2",
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: "3",
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id: "4",
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
methods: {
onselectionchange(val) {
console.log("val单行选中", val);
console.log("this.radioData", this.radioData);
// this.radioData = val.address;
this.radioData = val.address;
// return;
},
handleSelectionChange(val) {
console.log("val", val);
this.radioData = val.address;
},
getRowKey(row) {
console.log(row);
return row.address;
},
},
};
</script>
<style lang="sass"></style>