并做相应解释:
<el-radio :label="scope.row.id" v-model="role" @change.native="getRadioRow(scope.$index,scope.row)">{{scope.row.role}}</el-radio>
①绑定使用唯一值id进行绑定数据,保证数据唯一性。
(不然console会刷出了好多数据)
②因为label的显示原因,会默认将数据id显示出来。
所以这里使用{{}}来显示表格中radio当前行数据。
③change.native方法:
.native 官网解释:
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
④getRadioRow(scope.row):
这里也可以只传参一个,不用传scope.$index也可以。
附上完整代码:
<template scope="scope"> <el-radio :label="scope.row.id" v-model="role" @change.native="getRadioRow(scope.row)">{{scope.row.role}} </el-radio> </el-table-column>
data(){ return{ role:'', radioRow:{} } }, methods:{ getResponRow(row) { //获取选中数据 this.radioRow = row; //radioRow 是定义的保存选中数据的变量 }, }