《前端》vue element-ui 下拉框极其简单的回写方案-2020年11月7日

最新推荐文章于 2022-10-09 09:55:31 发布
最新推荐文章于 2022-10-09 09:55:31 发布
阅读量464 收藏 1
点赞数
分类专栏： 前端 VUE.JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bellediao/article/details/109547956
版权
本文介绍了在Vue中使用Element-UI组件库时，如何解决下拉框选择后内容无法回写的问题。通过一个简洁的解决方案，实现了下拉框选择项的正确显示。
摘要由CSDN通过智能技术生成

之前做的一个下拉框，是从element -ui手册上有代码，但是选了选项之后，选型内容不能回写。这有啥用！！

找陶海伟帮忙，他写了个好麻烦的方式。转来转去的。。 我看懂了，但是也并没有完全吸收。

李可利的一个代码我发现了原来如此简单。。

解决方案：

效果图：

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>elementUi-form</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.n
最低0.47元/天 解锁文章
bellediao
关注
专栏目录
绑定下拉框与数据回填
weixin_44561520的博客
06-09 605
开发工具与关键技术：vs与js 作者：戴怡斌 撰写时间：2019年6月5日 相信大家都知道下拉框是什么，不知道的也用过，当然只是在手机电脑上面用过尤其是在领游戏礼包选哪个区的时候被用的最为频繁，所以还是非常重要的。 大部分下拉框都会和搜索框，表格组合起来，用来排查。 下拉框也可以多个联合使用，排查起来更清楚，更仔细。 Js引用就不是了，先看css代码 一般来说都是先在控制器写好方法再...
下拉框boolean数据回填
weixin_49666931的博客
07-28 294
下拉框boolean数据回填 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 上图最后一个下拉框没有成功数据回填，控制台是有接收到回填的数据的，之所以没有成功回填的原因是回填的数据是boolean类型的数据，没法直接回填到下拉框。但是用文本输入标签就可以正常的回填。 如果想要用下拉框来接收这类型数据的话就要进行数据的判断...
下拉框数据的回填
weixin_44545672的博客
04-18 533
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Visual Studio 和 ASP.NET.MVC, 作者：陈鸿鹏 撰写时间：2019 年 4 月 12 日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
前端根据数据库的数据改变现实的内容，查询根据下拉框value值查询
weixin_44498188的博客
10-09 444
前端根据数据库的数据改变现实的内容，查询根据下拉框value值查询
下拉框数据回填
Zhuxxxxx的博客
03-01 771
在进行下拉框数据回填时，主要改变的是option标签内value的值，一般状态下，我们给其默认值0，即没有状态，如图： 通过封装的js方法，以id值和url方法路径打开可以选择的状态目录，用appendOption(“id”,“url”)获取id和url，具体代码如下： 状态的所有值通过数据库获取： 这样就可以在点击下拉框时显示所有状态： 回填时通过那一栏的数据的状态id来进行回填： 之后就会自动生成状态： 其他得数...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码.zip
最新发布
10-24
《基于后端SSM框架和前端Vue+Element-UI的图书管理系统源码解析》 图书管理系统是信息化时代中常见的应用，它能够有效地管理和组织大量的图书信息，为用户提供便捷的查询、借阅、归还等功能。本系统采用的是经典的...
在element-ui的select下拉框加上滚动加载
10-17
在开发Web应用时，我们经常遇到需要处理大量数据的情况，特别是在使用类似Element-UI这样的UI库时。Element-UI的`<el-select>`组件提供了一个方便的方式来选择数据，但默认情况下，当数据量过大时，一次性加载所有...
element-ui select 组件，下拉框无法选中和回显数据的问题
qq_36437172的博客
06-28 2550
问题描述：在使用 Vue 框架 和 element-ui 库进行开发，对于页面中回显下拉框中数据时，我们对下拉框进行切换时，出现下拉框无法选中，同时页面中选中的值也未改变。 添加 change 事件获取选中的值，使用 Vue 2.x 版本的 vm.$set 进行强制更新视图，页面中选中的值未改变。 changeGoodsInfo (value) { this.$set(this.baseForm, 'goodsInfo', value) } 解决方案：change 事件，使用this.$..
vue中回填时，下拉框/输入框无法选择或输入
负数
07-16 1136
<el-input v-model="student.name"></el-input> export default { data () { return { student:{} } }, methods: { update () { this.student.name='莉莉丝' } } } 1.这样虽然可以显示值，但是不能修改 原因：vue实列创建的时候 student的属性名并未声明
下拉框只读
javaBenface的专栏
11-20 4146
html中，select下拉框中是没有readonly这个属性的，只有disabled。但是用disabled就无法将下拉框中的数据读出来，所以要想办法将select下拉框设置成只读的。 将select下拉框设置成readonly 的两种办法。 第一种： [html] view plaincopyprint? script>var f=s.selectedIndexs
修改数据的下拉框回填和页面跳转
weixin_44560394的博客
04-18 508
(作者：饶家俊，撰写时间：2019年4月15号) 大家应该都知道，修改数据必须要有数据才可以修改，所以在修改数据的时候，要让他把以前新增或者修改的数据查询到它找到它，在把它给回填回来，这样我们才可以进行下一步的修改数据，和保存。 给大家介绍的数据回填是直接写在页面里面传递数据，把要回填的数据查询直接在视图这里就查询出来。 一开始视图就得到了根据主键ID，在用主键ID来筛选数据查询出要修改的用户类...
关于element 弹窗中使用表单回显的问题
QLP544134747的博客
04-15 2072
关于js的深拷贝
vue修改编辑弹窗下拉数据回显
agua001的博客
04-27 8533
1、效果如图： <a-form-item label="测站类型"> <a-select allowClear v-decorator="[ 'typeId', { rules: [{ required: true, message: '请选择测站类型' }] }, ]" placeholder="请选择测站类型" > <a-select-option v-for="(item, index)
vue3+element-plus 表单输入框无法输入、下拉框值不回显
qing_xing_的博客
07-11 2437
因为element-plus表单的ref和model的值不能设置相同的值，如果设置成相同的值，输入框无法输入、下拉框值不回显在element-plus的官方文档中是这样写的，可以看出来两者的值不一样 而在vue2+饿了么中是可以设置相同的值，官方写法如下...
vue使用el-select下拉框匹配不到值的优化方案
铁锤妹妹的博客
09-15 5530
一. 问题描述 点击编辑弹窗里从上面列表行数据里取到的乙方名称变成了乙方id15，产生的原因是因为弹窗里的甲乙方列表是从接口请求来的，比如后期某个乙方公司关停了，这条数据就会被删除，导致我们取不到这条数据 查看接口返回的列表，发现少了行数据中的乙方这条数据 二. 解决思路 findIndex() 返回值判断编辑当前行数据取到的id和甲乙方列表里的id是否有一样的； 如果有相同id的话，返回第一个符合条件的数组成员位置，都不符合条件，则返回 -1 如果返回数组成员位置 < 0 的话，从列表行数
vue 实现从后端获取数据渲染选择框
weixin_41431016的博客
06-30 2178
前端环境：vue 使用的vue 组件：iview 后端项目框架：beego 实现功能：从数据库中读取数据绑定到选择菜单栏 前端定义请求的路由地址 文件：src/api/demands.js // 获取集群列表 export const getClusterList = ()=>{ return SiodAxios.request( { url: baseU...
Vue使用本地数据 回填表单
眾K的博客
11-18 2225
created() { // 获取本地数据 let row = JSON.parse(sessionStorage.getItem("row")); // 使用本地数据 回填表单 this.goodsAddForm.goodsname = row.goodsname; this.goodsAddForm.goodscategory = row.goodsc...
Vue+Element-UI：下拉框选值不显示的解决方案
总结来说，遇到Element-UI下拉框值不更新的问题，开发者应检查数据绑定是否正确、是否需要手动触发更新，特别是在数据结构复杂或涉及深层次组件的状态时。同时，对于多选下拉框的编辑模式，确保赋值方式正确并且`el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值