IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue+elementui 如何设置radio默认选中 -> 正文阅读

[JavaScript知识库]vue+elementui 如何设置radio默认选中

vue+elementuiel-radio单选框默认选中以及v-model绑定值问题

需求描述:

弹窗里面的表单,是复用的后台返回数据,输入框里面的数据复用很容易,通过prop属性即可。
问题在于radio单选框,怎么将后台给的数值绑定为默认值

示例效果图:

在这里插入图片描述

涉及知识:

一、【elment-ui】radio 单选框中的 label 属性
误区:
1、误以为 value 是返回给后台的值,label 是展示在前端页面的值
导致红色框框里面的代码书写成,后台需要的单选框studentByEdit.studentSex参数值是数值,这种写法导致传递的值为label里面的是&否,而不是value里面的值,不符合接口传值需求;将label的值修改为1&0,导致前端页面展示效果也由是/否变为1/0,因此也不符合前端展示需求

<el-form-item label="请选择性别" :label-width="formLabelWidth">
  <el-radio-group v-model="v-model="studentByEdit.studentSex">
    <el-radio label="" value="1"></el-radio>
    <el-radio label="" value="0"></el-radio>
  </el-radio-group>
</el-form-item> 

二、【vue】属性绑定 v-bind ,简写:
上面的写法以及问题推测,证实了 value 这个属性值放在radio里面没多大作用,在radio单选框里面 lable 相当于 radio 的 value,由此删除掉上述代码中的value属性,调整为label绑定接口定义好的数值类型,前端展示的中文文本是&否直接写在标签中间

<el-form-item label="请选择性别" :label-width="formLabelWidth">
  <el-radio-group v-model="v-model="studentByEdit.studentSex">
    <el-radio label="1"></el-radio>
    <el-radio label="2"></el-radio>
  </el-radio-group>
</el-form-item> 

修整为上述代码后,发现还是 radio 单选框 还是没有选中后台返回的默认值,原因在于,上面 lable=“1” 这种写法数据是固定的,但是需要的是后台返回的动态数据,所以需要用到 v-bind,即 :lable=“1”

<el-form-item label="请选择性别" :label-width="formLabelWidth">
  <el-radio-group v-model="v-model="studentByEdit.studentSex">
    <el-radio :label="1"></el-radio>
    <el-radio :label="2"></el-radio>
  </el-radio-group>
</el-form-item> 

补充:

本案例中,后台给的字段值是数值,但是前端呈现效果应该是中文文本,如:1->是 2->否
解决方法?
1、请求接口的时候,将字段值进行映射后再展示

this.tableData.list.map(v => (v.studentByEdit.studentSex= v.studentByEdit.studentSex=== 1 ? '男' : '女'))

2、将前端页面映射后呈现的中文文本,转义成数值再传给后台

this.form.studentByEdit.studentSex= this.form.studentByEdit.studentSex=== '男' ? 1 : 0

类似案例效果:

switch 开关按钮默认选中以及绑定值问题

<el-switch v-model="updateForm.status" @change="changeOpen" :active-value="1" :inactive-value="0"></el-switch>

链接:https://www.jianshu.com/p/b28c48b67f08

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-16 19:33:27  更:2021-10-16 19:35:05 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/29 19:57:36-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计