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

效果如下:

 代码:

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

  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: elementui单选框radio回显可以通过v-model绑定一个变量来实现。当选中某个单选框,该变量的值会被更新,从而实现回显。例如: <template> <div> <el-radio v-model="radio" label="1">选项一</el-radio> <el-radio v-model="radio" label="2">选项二</el-radio> <el-radio v-model="radio" label="3">选项三</el-radio> <p>你选择的是:{{radio}}</p> </div> </template> <script> export default { data() { return { radio: '1' } } } </script> 在上面的代码,我们通过v-model绑定了一个名为radio的变量,并将其初始值设置为'1'。当用户选中某个单选框radio的值会被更新,从而实现回显。最后,我们通过{{radio}}来展示用户选择的值。 ### 回答2: elementui单选框radio回显是指在用户进行单选框选择后,重新加载页面,界面能够显示上一次的选择结果,即将已经选中单选框标记为选中状态。这是许多网站和应用程序都需要的一个基本功能。 在elementui实现单选框radio回显的方法很简单。首先,我们需要在Vue组件声明一个data变量,用于存储用户选择的单选框的值。在页面加载,我们需要将该变量初始化为一个默认值。例如,如果单选框有两个选项,我们可以将变量初始化为第一个选项的值。 然后,在单选框组件,我们需要将该变量绑定到v-model属性,这样当用户选择单选框,Vue会自动更新data变量的值。例如,如果我们将data变量命名为selected,可以将单选框组件代码写成如下形式: ``` <el-radio v-model="selected" label="option1">Option 1</el-radio> <el-radio v-model="selected" label="option2">Option 2</el-radio> ``` 最后,在页面加载,我们需要使用mounted函数,将页面的data变量初始化为上一次选择的值。例如,如果我们使用localStorage来存储上一次选择的值,我们可以在mounted函数写入如下代码: ``` mounted() { this.selected = localStorage.getItem('selectedOption') } ``` 这样,在页面加载,Vue会自动调用mounted函数,将data变量初始化为上一次选择的值。如果用户选择了其他选项,Vue会自动更新data变量的值,并将其存储在localStorage,以备下次使用。 总之,elementui单选框radio回显是一个基本的功能,可以通过简单的数据绑定和localStorage来实现。开发人员需要注意,在使用localStorage存储数据要注意安全性和隐私保护。 ### 回答3: elementui 单选框 radio 组件是很常用的表单控件,通常我们在做表单提交的候需要将用户选择的值回显到表单,以便用户确认是否选择了正确的选项。下面我来分享一下如何使用 elementuiradio 组件实现回显功能。 首先我们需要在表单预先渲染出 radio 组件,比如: ```html <el-form-item label="性别"> <el-radio-group v-model="form.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> ``` 这里我们定义了一个 `v-model` 为 `form.gender` 的 radio-group,用户选择的值将会被存储在 `gender` 。 接下来,我们需要从后端获取数据,比如用户的信息,然后将这些数据绑定到表单。这里我假设我们从后端获取到了一个名为 `userInfo` 的对象,包含了用户的信息。 ```js const userInfo = { name: '张三', gender: '男', age: 18 } ``` 然后我们需要将这些数据绑定到表单。 ```js new Vue({ // ... data() { return { form: userInfo } }, // ... }) ``` 现在我们要做的是将 `userInfo.gender` 的值回显radio 组件,这很简单,只需要将 `gender` 的值绑定到 radio-group 的 `v-model` 上即可。 ```html <el-form-item label="性别"> <el-radio-group v-model="form.gender"> <el-radio label="男"></el-radio> <el-radio label="女"></el-radio> </el-radio-group> </el-form-item> ``` 这样,当我们渲染这个表单,`userInfo.gender` 的值就会自动回显radio 组件了。 总结一下,elementuiradio 组件回显很容易,只需要将后端传来的数据绑定到表单的 data 数据即可,再将需要回显的值绑定到 radio-group 的 `v-model` 上即可。需要注意的是,如果后端传来的值和 radio 组件的 label 不一致,还需要使用 radio 的 value 属性来将二者对应起来。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值