element-ui中的选择器组件，匹配指定id,显示框里面展示也是id

最新推荐文章于 2025-08-19 09:08:23 发布
原创 最新推荐文章于 2025-08-19 09:08:23 发布 · 984 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
elementUI组件使用过程中遇到的问题

当前文章被收录于：

elementUI组件使用过程中遇到的问题
1 篇文章 0 人学习
订阅专栏 查看详情
本文探讨了 el-select 选择器在指定 ID 时显示错误的问题。具体表现为期望展示对应的文本信息，但实际仍显示为 ID。分析发现，原因是指定的 ID 类型与 options 中的 ID 类型不匹配。

1.问题: el-select选择器指定一个id，预期是展示对应的文字信息，实际却展示的还是id
2.问题原因：指定的id与选择器中的options里面的id的类型不一致，导致的。

标签
#前端 #vue.js
element级联选择器根据id值回显
d583531572的博客
06-09 3437
element级联选择器根据id值回显父亲节点 //回显(多级) changeDetSelect(key, treeData) { let arr = []; // 在递归时操作的数组 let returnArr = []; // 存放结果的数组 let depth = 0; // 定义全局层级 // 定义递归函数 function childrenEach(childrenData, depthN) {
基于vue+element-ui实现Cascader级联选择器+Table树形数据
椰卤工程师的个人博客
11-13 2463
开发进度提前50%，啊，真香。 下面，看图说话 Table树形数据 Cascader级联选择器 功能实现+详细代码 Cascader级联选择器 options属性指定选项数组即可渲染出一个级联选择器，所以后端接口返回的数据结构要保持一一致性，这样处理起来会省很多事。 element官网给出的options需要的数据格式： options: [{ value: 'zhinan', label: '指南', children: [{
el-select默认选中 显示的是id 不是汉字
weixin_50899360的博客
08-11 1766
el-select回显 默认选中 显示id
【element Vue】＜el-select＞回显问题，应该回显 label 却只显示了id
热门推荐
AAAXiaoApple的博客
06-08 1万+
回显问题，应该回显 label 却只显示了id
关于element-UI的el-select下拉框数据回填显示的id问题
SYXZSs的博客
01-25 8642
关于element-UI的el-select下拉框数据回填显示的id问题 问题如图： 三个form-item都是使用el-selece，但是责任人一栏却显示为id 问题情况 是后台返回的数据类型的原因。 我在接口获取的function里 循环责任人的id，打印类型为number。此时以这样的情况可以判断为id应该属于String类型。 如下图：我使用map更改原数组，使其id转为String再重新赋值给id。整个数组再赋值给空数据，这样再绑定el-select就不会出现数据回填显示id的情况了！
element-ui中select选择框渲染文字内容但是获取的是列表的id
weixin_45803990的博客
12-29 1898
label表示的是列表渲染的内容，value是change中绑定的值。 <el-select v-model="value" placeholder="请选择" @change="selectChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.id"> </el-opti
element-ui中Cascader 级联选择器组件使用(默认选择是value(id)，还想要获取label(name值))
agua001的博客
09-21 4360
我的需求是一个下拉框选中城市（先选中省-对应市显示-选中显示在下拉框中）注：区不要 但是我之前封装了一个三级联动的，所以我需要重新封装一个： cityMap.js const map = { 110000: '北京市', 110100: '北京市', 110101: '东城区', 110102: '西城区', 110105: '朝阳区', 110106: '丰台区', 110107: '石景山区', 110108: '海淀区', 110109: '门头沟区', 110
Element-ui组件踩坑记录
weixin_40400844的博客
02-26 1216
Element-ui组件踩坑记录-继续踩坑继续记录1.组件交互页面抖动：出现问题：解决方法：2.组件属性：出现问题：问题原因：解决方法：3.组件样式修改：出现问题：问题原因：解决方法：4.select下拉框：出现问题：问题原因：解决方法： 1.组件交互页面抖动： 出现问题： 组件操作时，页面会出现抖动情况，文字会模糊； 解决方法： 1）Checkbox 多选框切换： .el-checkbox__inner::after { transition: none!important; } 2）表单验证信息出
仿element-ui cascader级联选择器，layui cascader级联选择器
一夏coco的博客
09-09 5551
前言 由于项目中使用的不是vue的框架，但是又需要用到cascader组件，可惜找了很久都没有找到想要的效果，只好自己写组件了。为了力求和element-ui的级联效果一致，来自后端开发的我亲自操刀，哈哈哈！！ 使用示例 引入 <html> <head> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/> <link r
element-ui cascader(级联选择器)组件使用心得
qq_40228475的博客
03-08 4201
最近公司项目需求需要用到级联选择功能，第一次遇到这个功能，因为本身项目就用的element-ui，所以就去官方组件库找了找有没有这种组件，发现果然有这个组件 直接复制的官方代码到项目里，一切正常的运行起来了，接下来就是调接口拿数据，返回的数据如下图所示： 成功拿到数据，接下来就是赋值了，先直接换上试试 this.selectData = response.data 此时，发现页面组件已经渲染成功，显示似乎也没有问题，随便点了点试试，发现了第一个bug，列表虽然展示出来了，但本来的三级联
element-ui使用select组件同时选中多个值
Fourierrr_的博客
06-02 4928
发现问题 首先我们来看一段最基本的el-select代码 <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in food" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
vue2.0 element-ui中的el-select选择器无法显示选中的内容
weixin_39037804的博客
10-03 700
我使用的是element-ui V2.2.3。代码如下，当我选择值得时候，el-select选择器无法显示选中的内容，但是能触发change方法，并且能输出选择的值。 select.vue文件 <te...
element的多级选中_element UI 级联选择器默认选中的值
weixin_39763293的博客
12-22 2404
element UI的Cascader级联选择器组件在编辑时，它需要一个数组值，而一般我们api给的数据是一个值。所以两个解决方法：说服后台，让后台给arr。自己根据给定的值获取级联关系arr。刚好这两天解决了这个问题。写了一个方法如下：function getTreeDeepArr(key, treeData) {let arr = []; // 在递归时操作的数组let returnArr =...
element-ui框架Select选择器设置值跟选中值不一样的问题
77的博客
07-31 7376
比如： data() { return { test1:'', cities: [{"id":1,"mixAccountNumber":"001","region":"ALL"}, {"id":2,"mixAccountNumber":"002","region":"ALL"}], } } 界面如下： ...
django + element select选择器如何显示默认option选项
hhhhh11的博客
06-16 1810
场景 当前场景为编辑测试用例信息：Django的model当中定义了TestCase， Tag模板，其中TestCase中包含tags字段，用例存储当前测试用例的标签，与标签表Tag是多对多的关系，用例与标签的关系保存在test_case_tags表中。 现在需要在vue中展示测试用例的信息，其中在编辑弹窗中要显示当前用例的标签以及所有可选的标签，且用例标签显示为默认选中。 element select中model与options不匹配 此时，form中传入的model （tags）默认值为django
关于element级联选择器数据回显问题
weixin_33940102的博客
02-19 4560
element级联选择器数据回显问题 对于前端小菜鸡来说，被这个问题也是困扰了好久。也是百度的方法。表单部分代码： &lt;el-form-item label="部门名称：" prop="deptId"&gt; &lt;el-cascader placeholder="请选择部门" :props="dep...
Element Select 选择器从后台获取并显示数据
Otto的学习笔记
03-25 1万+
本次使用的Element版本为2.15.7，使用官方文档基础用法做示范。刚接触Vue，如有不足，请指教 首先将代码copy下来，添加focus方法，删除data中的静态数据，最后在methods中实现focus方法 Vue部分： <el-select v-model="value" placeholder="请选择" @focus="getChoiceList"> <el-option v-for="item in options" :key="ite
Vue 修改 Element-UI 组件的原生样式
qq_39249627的博客
06-11 2273
Vue 修改 Element-UI 组件的原生样式
renren-ui组件库设计与实现
最新发布
gitblog_01088的博客
08-19 518
renren-ui组件库设计与实现 【免费下载链接】renren-ui renren-ui基于vue2、element-ui构建开发，实现renren-security后台管理前端功能，提供一套更优的前端解决方案。 项目地址: h...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值