el-select数据回填时的处理方案与踩坑解决方法

最新推荐文章于 2024-05-10 17:39:47 发布
最新推荐文章于 2024-05-10 17:39:47 发布
阅读量738 收藏
点赞数
分类专栏： 笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XIAO_A_fighting/article/details/129417277
版权
在Vue项目中，为组件设置默认值通常涉及v-model的赋值。然而，对于el-select组件，除了设置v-model的初始值，还需要确保对应的el-option数据已准备就绪，以正确初始化选择器，避免出现未选择项的问题。
摘要由CSDN通过智能技术生成

项目场景：

为需要进行双向数据绑定的组件设定默认值时就是直接对v-model绑定的值赋值。但是对于el- select来说 不仅需要赋值v-model的初值，还需要将对应v-model的el-option所依赖的数据设置好，这样才能解决初始化选择器的问题。

MonsterQy
关注
专栏目录
Element-ui里Select 选择器常用的属性和数据回填
yuanxinwyc的博客
04-02 3993
label属性绑定的下拉框要显示内容如下图 el-select里change事件，在下拉框选取数据时候触发的事件，会有一个返回的参数，就是 el-option里value的值，value绑定的groupId 触发下拉框选择事件，打印结果 el-select里v-model属性绑定的值就是当前el-option里value的值,打印结果如下 数据回填：根据el-option里value绑定的groupId进行回填，点击弹框的时候通过事件传入需要的group...
element el-select 数据太多导致卡顿解决方案
fendoudemayi159的博客
06-02 1557
element el-select 数据太多导致卡顿解决方案
自定义el-select下拉菜单的内容以及数据回显的内容
最新发布
qq_59625204的博客
05-10 1104
但是此时虽然实现了自定义内容但v-model绑定的值也回显了，所以此时我们要对默认的数据回显处理一下，在style标签中设置如下代码。这里我设置了ref为seriesBorderTypeRef,在change事件中通过以下代码就可实现数据回显部分。下拉选项的自定义内容好实现，因为他有默认插槽，所以直接在el-option标签里面写自定义内容就可以实现。.现在完美实现了需求，最后不要忘记清除添加的style样式哦。关键上方选中的数据回显应该怎么做。
el-select接口返回结果应显示文本Name而不是数字Id解决方案
Welcome KrityCat Honey
02-18 612
本人在编写页面跳转传递参数时，发现el-select界面显示id而不是我想要的Name。于是尝试了晚上几种方法后却无法解决，研究后发现是返回结果格式问题，便写下这篇避免读者踩坑。
el-select和el-cascader标签 因为类型不一致，造成没办法回填
z3zz3691的博客
04-19 328
如： 在v-model="formData.zoneId"前转类型。在v-model="formData.zoneId"前转类型。解决方法3：转类型 value="item.id + ''"el-cascader 因为类型不一致，造成没办法回填。el-select 因为类型不一致，造成没办法回填。在后以，直接将返回的zoneId字段类型转掉。
关于element-UI的el-select下拉框数据回填显示的id问题
SYXZSs的博客
01-25 7858
关于element-UI的el-select下拉框数据回填显示的id问题 问题如图： 三个form-item都是使用el-selece，但是责任人一栏却显示为id 问题情况 是后台返回的数据类型的原因。 我在接口获取的function里 循环责任人的id，打印类型为number。此时以这样的情况可以判断为id应该属于String类型。 如下图：我使用map更改原数组，使其id转为String再重新赋值给id。整个数组再赋值给空数据，这样再绑定el-select就不会出现数据回填显示id的情况了！
关于el-select回显问题 : 框内不显示label，而是value
qq_71214810的博客
11-11 5650
希望大家-成为厉害的大人和更可爱的小孩！很高兴遇见你。
el-select数据回填问题，不显示label
sheng_xinjun的博客
09-14 1720
el-select数据回填问题，不显示label
elementUI的select选择器回填，展示问题
z2014ypd的博客
04-18 7978
在使用elementUI的select选择器的时候，编辑数据，页面数据回填弹出模态框，这时候模态框选择器的值是数据而非我们定义的label，案例如下： 选择器前端代码： 绑定的数据： 点击编辑按钮后，数据回填的代码： 结果： 在此可以看出，是否付款那儿显示的是我们的数据值而非名称，这个原因就是我们前端绑定的数据是String类型，然而回填的是number类型，所以只需要把绑定的数据变成nu...
el-select与el-tree嵌套树结构单选；el-tree懒加载无子级数据时去掉下拉箭头
killerdoubie的博客
03-06 2206
el-select与el-tree嵌套树结构单选；el-tree懒加载无子级数据时去掉下拉箭头
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
解决el-select超长选项时不出现横向滚动条问题
catfishlyf的博客
08-05 1897
如果只设置组件下拉框的max-width，那么超长的选项超长默认会使用...进行隐藏，显示如图： 想要显示横向滚动条需要两个步骤 ① 显示选项超长部分 ② 将选项item的display属性设置成block 代码如下： <el-select v-model="value" placeholder="请选择" popper-class="my-select-dropdown"> <el-option v-for="item in options" :ke
el-select远程查询大数据量分段加载
wusq的博客
09-02 2790
el-select远程查询大数据量分段加载 1.问题： 最近使用elementUI的el-select组件的远程查询功能，发现在大量数据（1w条以上）的时候出现页面卡死的情况，经过排查，产生问题的原因是前端渲染造成的。 2.解决思路 1.在查找解决方案的时候看到一个解决办法是加载前50条，效果是这样的： 2.按照这个思路，想到了 ...
el-select踩的坑记录一下
JankoY的博客
10-15 627
从后端获取的数据给el-select渲染，渲染失败 前端代码 获取数据 async getSkus(value){ let sn = value sn.forEach(item=>{ if (sn.length > 1) { sn.splice(0, 1) console.log('删除了这个->' + item); } }) const { data:res } =
使用select遇到的坑
weixin_33924770的博客
05-06 220
待更新 转载于:https://www.cnblogs.com/rencoo/p/10820514.html
elementUi 日期时间选择器遇到的一个坑
墨茶Official 愿你在二次元有吃不完的草莓 饺子(ㄒoㄒ)
01-08 3927
添加value-format属性后的坑前言看图代码解决结尾 前言 今天遇到一个日期时间选择器的坑, 选择的时间是00:00:00 点击确定后变成12:00:00 找了一会 也没发现是哪里有问题，当我把 value-format属性删除后 发现正常了, 就是value-format造成的。 看图 代码 <el-form-item label="审核时间" class="create-time-item"> <el-date-picker v-model="checkTi
[element-ui]el-time-select组件回显错乱问题
xxuxioxx的博客
02-06 1062
el-time-select组件回显错乱问题
avue行编辑el-select选择数据后未回写问题
XJMTCSZJing的博客
07-11 376
el-select v-model=“otherForm.departHour” placeholder=“请选择发车时段” @change=“val => onDepartHourChange(val, otherForm, row, index)”>排查问题发现v-model绑定值是变化的，刷新页面下次点击编辑可以回写上次选中的内容，说明只是vue没有监听到其变化，未刷新导致。classPlanId: null, // 行发车时段绑定的id,其表示当前的发车时段。
element级联选择器，异步加载回填问题
Carrie_zzz的博客
01-08 2649
啊啊啊，记录一下 我用的动态 加载，但是一直回填不过去，我其实想到了因为异步所以一直没上去，但是一直想着找其他办法 问题其实很简单，因为这个给我了启发https://codepen.io/hopekayo/pen/abovxxM?editors=1111 以上两点都是关键，你发现没有下面的还是无法回填 ...
el-select数据回显时，el-option没有该数据，如何提示，如何解决
06-03
当el-select的选项数据与回显数据不一致时，el-option会显示为未选中状态。这种情况下，我们可以通过设置el-select的multiple属性为true来允许用户自定义选项，从而解决回显数据与选项数据不一致的问题。 具体来说，我们可以将el-select的multiple属性设置为true，并将回显数据作为v-model绑定到el-select上。这样，用户可以在el-select中自由选择选项，而不受选项数据的限制。如果回显数据中包含了选项数据中不存在的值，我们可以在el-select组件中添加一个新的el-option，提示用户该值不存在于选项数据中。 以下是一个实现提示不存在值的el-select组件的示例代码： ```vue <template> <el-select v-model="selectedValue" :multiple="true"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> <el-option v-if="!options.some(option => option.value === selectedValue)" :label="`不存在的值：${selectedValue}`" :value="selectedValue"></el-option> </el-select> </template> <script> export default { props: { value: { type: [String, Array], default: '' }, options: { type: Array, default: () => [] } }, computed: { selectedValue: { get() { return this.value }, set(newValue) { this.$emit('input', newValue) } } } } </script> ``` 在上面的代码中，我们首先通过props接收了el-select的选项数据(options)和回显数据(value)。然后，我们将value作为v-model绑定到el-select上，以便可以监听用户的选择。接下来，我们根据options和selectedValue渲染了所有的el-option，并使用条件渲染添加了一个新的el-option，用于提示不存在于options中的selectedValue。最后，我们通过一个computed属性将selectedValue转换为双向绑定的value属性，并在setter中触发input事件，以便将用户的选择传递给父组件。 使用这个el-select组件时，如果回显数据中包含了一个不存在于选项数据中的值，el-select会自动添加一个新的选项，提示用户该值不存在于选项数据中。这样用户就可以自由选择所有选项，包括回显数据中不存在于选项数据中的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值