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

效果如下:

elementui表格中使用Radio 单选框,并在数据加载完成时,回显状态为选中的数据。_第1张图片

 代码:

html:


    
        
    

    
    
    
    


其中:

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

你可能感兴趣的:(elementui,elementui,前端,javascript,vue.js)