element ui中el-cascader设置默认值，可选中但是input框不显示默认值的原因

最新推荐文章于 2023-11-10 14:46:50 发布
最新推荐文章于 2023-11-10 14:46:50 发布
阅读量5.3k 收藏
点赞数 2
文章标签： vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57011137/article/details/120450942
版权

在做一些后台的时候，可能需要用到element-ui组件中的级联选择器的多选框的回显
首先 给el-cascader组件通过v-model绑定一个变量
在进入页面前通过接口获取id来进行回显，有的时候我们会出现那种input下的列表被选中了，但是input框中的值没有进行展示
因为我们一般进行赋值的时候是在mounted获取值来进行回显的，当时页面已经挂载好了，所以将其放到created中或者beforeMount即可通过id来进行回显

out-of-reach
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
element-ui中的el-cascader 级联选择动态加载数据回显问题,输入框中不显示默认的文本
gaojian531048553的博客
06-19 9610
一直比较喜欢使用element-ui,在近期项目中有用到element-ui中级联选择,遇到了一个问题:在编辑详细信息的时候,原来已有的值无法显示的问题,经过研究发现有两种情况, 一.显示最后一级节点的时候即设置(emitPath=false和show-all-levels=false), 由于数据是动态加载暂时还没有获取最后一级的节点数据(也没有全路径),所以input输入框中 正常是无法显示默认值得name,或者显示全路径,初始默认值必须要满足[上上级code,上...
el-cascader回显只选中不显示的问题
mkbird的博客
06-30 3810
先看代码 因为el-cascader的v-model绑定的必须是数组所以在我点击对应页面发起请求的时候，将需要的值push到cityCascader中 此时就会出现标题的问题，我的cityCascader的数据是符合要求的，但是级联选择框没有默认数据，只有默认选中解决方法是，不使用数组的push方法，而是直接重新赋值 此时就可以默认显示啦...
elementUI的cascader级联选择控件使用采坑：设置默认值回显问题解决方案（亲测有效！）
HELLO WORD
07-31 5304
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/ 记录一个刚刚遇到的问题，以及解决方法。希望可以帮助之后遇到同样问题的小伙伴们！ 问题描述 使用elementui的级联选择控件，并需要对其设置默认值，以及修改默认值时，发现问题： 先贴出相关核心代码如下： <el-cascader ref="locationCascader" v-model="location" placeholder="省份/城市/区域" :o.
el-cascader级联选择器手动赋值，input框不回显
weixin_44569565的博客
07-18 3465
1.在与级联组件同级的位置放置一个el-input标签，v-model与级联选择的绑定的变量相同，这样级联选择选什么都会赋给input。3.用样式把级联的input框隐藏掉，把弹出的panel位置调整一下，使它对准在input的正上方就ok啦！ps：可能会遇到只能点击不能输入的情况，是因为el-input被压到低下了，调整一下层级关系就可以，像这样。里是省市区，我输入‘北京’，就可以显示绑定，但是如果输入‘aaa’，就会显示无匹配数据⬇。并且失去焦点后，‘aaa’也会丢失。
element-ui中将checkbox与input框进行关联
old_hu的备忘录
05-17 7709
刚开始网上搜了很多,一直没看到满意的东西,后来自己就结合element-ui现有的东西写了一个,方便以后参考 具体效果如下: 现在的逻辑就是输入框输入条件,+可以添加数据行,√(如果第一次是添加,第二次就是修改),前面的勾选是选择创建的条件拿到当前一条的数据,然后给其他地方用,如果是没有提交过的数据不允许勾选,所有要禁用勾选 //这几个是覆盖element-ui原来的样式 thead{ ...
解决element-ui中级联选择器(Cascader)出现空白选项的bug
ybx18046048113的博客
06-20 484
前端是根据children来进行级联显示的，后端对象中的children属性增加注解。
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui中的select下拉列表设置默认值方法
10-18
今天小编就为大家分享一篇element-ui中的select下拉列表设置默认值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
el-cascader首次赋值不显示问题
m0_72315994的博客
04-01 485
给输入框的placeholder绑定v-model绑定的值，输入框第一次不显示placeholder显示啊；然后使用css给placeholder设置跟输入框字体一样的样式；话不多说，直接上干货；
elementUI中checekBox实现全选和反选以及实现在input中输入空格出现label分割
红岸基地
10-13 674
写在前面 为什么写这个呢？两个原因，一个是自己用到了，另一个是压根没人写，我不知道是太简单了懒得写还是很多人都忘记了，不过我看网上找demo的还挺多的，而且天下文章一般抄，都不对还在那不停的抄，我也是醉了，没一点办法，罢了罢了，自己写吧 官方DEMO 官方全选DEMO 全选这里就不实现了，很简单，官方给的有，实现反选 这里使用的还是官方的demo，只是添加了一个反选的函数,所以使用的时候先看官方demo源码 <el-checkbox :indeterminate="isIndeterminate"
关于VUE三级联动组件a-cascader默认值不显示问题
zhang804633234的专栏
01-22 2282
用了VUE一个三级联动组件通过接口调取数据死活默认值不显示 <template> <a-cascader :options="options" :default-value="['zhejiang', 'hangzhou', 'xihu']" @change="onChange" /> </template> <script> export default { data() { return { m...
vue父组件传值给子组件在element-UI select，input不渲染问题
blank_g的博客
06-29 1725
// 渲染改变值的地方 <el-form-item label="审批结论：" prop="reason"> <el-select v-model="approvalForm.reason" placeholder="请选择" @change="changeReason"> <el-option label="通过" value="0"></el-option> <el-option label="不通过" value="1"&
vue element-ui 级联选择器 el-cascader 多选数据回显问题(无懒加载)
最新发布
weixin_44741820的博客
11-10 1850
多选时组件带了父级id，后端只要最后一级的值，回显时也是返回的最后一级的id值
element组件cascader使用v-model无法动态设置默认值的问题
zyxczyf123的博客
09-11 6011
动态设置级联选择器的默认值
element input 自适应_input或者el-cascader的输入框随输入内容宽度自适应
weixin_39808893的博客
12-24 2655
解决的思路是动态修改css的width如果是input，用onkeydown,onkeyup配合使用如果是el-cascader的输入框id="el-cascader"v-model.trim="formTemp.service":disabled="currentStep!='apply'":options="serviceOptions":props="{ expandTrigger: 'ho...
html的check设置默认值,HTML Input Checkbox defaultValue用法及代码示例
weixin_42499681的博客
06-16 1405
DOM Input Checkbox defaultValue属性用于设置或返回Input Checkbox字段的默认值。此属性用于反映HTML值属性。默认值和值之间的主要区别在于，默认值表示默认值，并且在进行一些更改后该值包含当前值。此属性对于确定日期字段是否已更改很有用。用法:它返回defaultValue属性。checkboxObject.defaultValue它用于设置defaultVa...
【element-ui】el-input 输入值不能正常回显，触发其他地方会显示解决方法
小墨鱼的前端问题录
09-21 2031
【代码】【element-ui】el-input 输入值不能正常回显，触发其他地方会显示解决方法。
vue el-input设置默认值
09-02
要在Vue的el-input组件中设置默认值，有几种方法可以实现。第一种方法是使用v-model指令将默认值绑定到data中的一个属性，然后在input标签中使用该属性作为value的值。例如，您可以在data中定义一个名为"defaultVal"的属性，然后将其绑定到el-input的v-model中。在input标签中，您可以将value属性设置为"defaultVal"。这样，当页面加载时，输入框将显示默认值。 另一种方法是使用placeholder属性来设置默认值。您可以在el-input标签中使用placeholder属性，并将其设置为您想要作为默认值显示的文本。但需要注意的是，placeholder属性只是在输入框为空且没有获得焦点时显示，并且不会将其值传递给v-model绑定的属性。 还有一种方法是使用监听input事件来判断输入框的值，并根据条件设置默认值。您可以在el-input标签中添加@input="handleInput"来监听输入事件。然后，在Vue实例中定义一个名为handleInput的方法，该方法接收输入框的值作为参数。在方法内部，您可以使用if语句来判断输入框的值是否等于默认值的长度，如果是，则将输入框的值设置为默认值。 总结起来，要在Vue的el-input组件中设置默认值，您可以使用v-model绑定属性、placeholder属性或监听input事件并设置条件来实现。具体使用哪种方法取决于您的需求和偏好。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-input添加默认前置值，不可删除，只能在默认值之后增加](https://blog.csdn.net/weixin_44539392/article/details/125301822)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [element input-number 默认值设置为空](https://download.csdn.net/download/qq_34086049/15483108)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [element-ui设置input默认成整型](https://blog.csdn.net/qq_36509946/article/details/128903926)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值