将后端返的值转换成文字展现在el-select框里

最新推荐文章于 2024-05-28 14:09:03 发布
最新推荐文章于 2024-05-28 14:09:03 发布
阅读量1.1k 收藏 7
点赞数
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50988305/article/details/120888231
版权
本文讲述了在Vue.js应用中如何处理后端返回的状态数值，并将其转换为易于理解的文字，在el-select组件中展示。作者分享了自己在解决此问题时的学习过程，包括使用console.log()辅助调试，以及对于JavaScript基础知识的需求。希望寻求更简洁解决方案的大佬提供指导。
摘要由CSDN通过智能技术生成

今天和后端调接口，有一个修改状态的功能，如下图所示

 

 

 后端返的是一个状态代表值（0，1，2，3这种），

新增时的代码是这样

<el-form-item label="状态：" :label-width="formLabelWidth" prop="STATE">
    <el-select v-model="addForm.STATE"  style="width:230px" clearable placeholder="请选择">
        <el-option value="0" label="待审核"></el-option>
        <el-option value="1" label="兴趣"></el-option>
最低0.47元/天 解锁文章
大西瓜去不去皮
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element-ui中的select下拉列表设置默认值方法
10-18
然后在`<el-select>`标签上使用`v-model`指令将`<el-select>`的值绑定到这个变量上。比如： ```html <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value...
antd select组件相关——传值是数字、显示是文字、下拉框设置了value导致placeholder不显示等问题（较基础）
前端小白菜的菜园子
03-17 3878
antd select组件相关——传值是数字、显示是文字、下拉框设置了value导致placeholder不显示等问题（较基础） 首先看要求： 有placeholder, 显示四个选项，选择一个选项时，传给后端的是数字类型。 数据是下面的结构： teamOptions = [ { label: "0-10人", value: 1 }, { label: "10-50人",
Element UI el-select选择器根据后台返回的值动态展示内容
m0_58565372的博客
10-26 2000
需求：一个选择器的下拉框里面的内容是后台返回的数据，对于这样的情况我们怎么处理呢？
el-select，大数据量性能优化，字典非展示态识别以及中文回显
最新发布
qq_43342477的博客
05-28 395
前段时间工作中遇到性能优化的问题，其中，因为页面打开一瞬间，需要同时大量展示下拉，会导致页面响应过慢问题，所以争对下拉做一些优化（这里的组件为element里的el-select组件）
后台返回字典值，前端在表格中根据接口返回得数字或者对应code展示文字实现
zwjl1017的博客
05-30 895
v2+js+element ui 实现字典匹配渲染表格
一次搞懂 el-select 如何获取选中项的中文名称
Shids_的博客
03-28 3675
一次搞懂 el-select 如何获取选中项的中文名称
el-select使用方法及遇到数据回显的坑
热门推荐
weixin_33958585的博客
03-25 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
下拉框渲染的是数字而不是对应的文字，如何处理
一株木樨的博客
12-04 1591
下拉框将值渲染为对应的文字展示在前端页面
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
10-16
el-autocomplete组件在Vue项目中通过简单的模板标签即可嵌入，能够与后端服务器进行交互，从服务器获取数据后展示下拉提示。用户可以根据提示选择内容，提高输入效率。 #### 3. 实现远程搜索功能 远程搜索功能的...
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
jquery根据一个值来选中select下的option实例代码
10-21
在提供的示例中，`str = '${conclusionTypeName}'` 表示这个值可能是从后端 Action 传递过来的，`'${conclusionTypeName}'` 是一种 JSP EL（Expression Language）表达式，用于获取 Action 中的属性值。如果 `...
Element UI表单设计及代码生成器-javascript
06-21
这意味着，一旦表单设计完成，开发者就可以快速地将设计转换为实际的前端逻辑，减少了编码错误和调试时间。 此外，这个工具可能还支持自定义事件处理和表单验证规则的设置，允许开发者在设计阶段就指定输入数据的...
【vue】下拉框回显问题（显示数字，实际应该显示中文）
易小花的博客
10-23 7564
【vue】下拉多选框回显问题 前端选择显示为中文。保存后，刷新数据回显，为1。 但，我想要显示的效果是文字，而且在别的需求页面中我也是这样写的。 百度，访问多篇博客，了解到问题的解决方法。 解决的重点：注意两边对应的数据类型。 所以，我去检查了。申明变量的时候，我用的是this.jtjx = null;数据的返回结果也是数字类型。查看option时发现了问题，option的value类型是string类型。两边类型对不上，那自然就读取不到对应的label啦。 问题解决。 总结：value值
前端根据后端返回状态来判断进行中文显示并定义中文样式
cqzdmm的博客
02-14 634
前端根据后端状态来判断进行中文显示并定义中文样式
el-select自定义文本框内容
大香蕉的博客
08-16 6357
效果： 代码： <el-select style="width:100%;" v-model="form.transportNumberPlate" filterable :disabled="readonly" remote placeholder="请输入关键词" :remote-method="searchPlateNum" @change="handleSelectPlateNum" :l...
使用el-select ，传入数据，它显示数字的问题，不显示汉字，el-select下拉中文选择
m0_49471668的博客
11-21 1568
使用el-select ，传入数据，它显示数字的问题，不显示汉字，el-select下拉中文选择_wg6oos88的博客-CSDN博客
vue中怎么把从后端取到的数据为数字的状态转为汉字
qq_24441205的博客
04-17 918
1.以“派工状态”为例，如取到的数据为数字类型，表达式处写法;dispatchState为字典中“派工状态”的字段名。
element select下拉框高亮显示输入文本
weixin_44177413的博客
07-20 617
思路就是把请求到的数据分别存到两个变量 一个会根据高亮值改变 一个永不改变 然后替换要改变的数据的内容成标签形式 用v-html渲染出来。
element-ui <el-select> + <el-option> 回显格式为中文 传值格式为对应value
weixin_30825199的博客
10-22 2530
<template> <!-- 需求:使用 <el-select> + <el-option> 关于下拉选择 前端显示中文，传值为对应格式value --> <div class="demo"> <!-- 新增部分 --> <el-select ...
怎么在el-select框里面加一个放大镜单位icon图标】
05-13
你可以在 `el-select` 的 `el-input` 中添加一个 `suffix` 插槽，然后在这个插槽中添加一个 `i` 标签来显示放大镜图标。例如： ```html <el-select v-model="selectedValue" placeholder="请选择"> <el-input v-model="inputValue" suffix> <i class="el-input__icon el-icon-search"></i> </el-input> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 在上面的代码中，`suffix` 属性用于显示 `el-input` 右侧的插槽，而 `i` 标签则用于显示 `el-icon-search` 图标。你可以根据需要修改图标的样式和类名。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值