效果如下:
代码:
html:
<el-table :data="tableData" border style="width: 100%" ref="tableData">
<el-table-column label="" width="65">
<template scope="scope">
<el-radio :label="scope.row.id" v-model="radioRespon" @change.native="getResponRow(scope.$index,scope.row)"> </el-radio>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" min-width="500">
</el-table-column>
<el-table-column prop="old" label="年龄" min-width="500">
</el-table-column>
</el-table>
其中:
1,:label="scope.row.id" 和 v-model="radioRespon"是对应关系,简单理解就是radioRespon===scope.row.id。因为数据都是走接口获取,绑定一般使用唯一值id进行绑定数据。当有回显状态为已选中的数据时,也能通过id轻松拿到对应数据。
2,@change.native="getResponRow(scope.$index,scope.row)"是原生选中el-radio后拿到的当前行scope.row的数据信息,scope.$index为第几行(索引)数据。
3,因为label的显示原因,在标签对中不加任何字符试,会默认将数据id显示出来,为了解决这个问题就需要添加‘  ’以空格来显示。
js:
获取选中数据:
getResponRow(index, row) { //获取选中数据
this.responRadioCheck = row; //responRadioCheck 是定义的保存选中数据的变量
},
回显:
axios.get('/user', {
params: {
cityId: 12345
}
})
.then(function (response) {
for (var i = 0; i < response.data.length; i++) {
//获取到状态为已选中的数据,将数据的id绑定到responRadio,并将条数据赋值给选中行变量。即可实现回显
if(response.data[i].status===1){
this.responRadio=response.data[i].id;
this.responRadioCheck=response.data[i];
}
}
})
.catch(function (error) {
console.log(error);
});