elementui表格中使用Radio 单选框，并在数据加载完成时，回显状态为选中的数据。

本文链接：https://blog.youkuaiyun.com/qq_40639028/article/details/120946456

本文详细介绍了如何在Vue.js中使用el-table组件实现数据绑定，包括利用radio选择数据并监听change事件获取选中行信息。同时，讲解了如何设置回显功能，通过比较接口返回数据的状态，将已选中项的id绑定到v-model，并赋值给选中行变量，从而实现数据的回显展示。示例代码中展示了具体的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

代码：

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)">&nbsp</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显示出来，为了解决这个问题就需要添加‘ &nbsp’以空格来显示。

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);
      });