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

小半 • 2022年12月30日下午2:53 • 前端开发 • 阅读 119

效果如下：

代码：

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

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66305.html