elementui form表单复用 造成每次弹出不能自动获取焦点问题

因为在项目中是一个input输入点击出弹窗输入修改系数(产品就是要的这样的,…)所以就会很明显的看到点点击table input获取焦点时,弹窗弹出,焦点还在table input上,所以就要做成弹窗的input自动获取焦点,本来(1)原生属性 autofocus可以自动获取焦点,但是autofocus 只有在模板加载的时候起作用,也就是第一次可以自动获取
(2)第二种尝试 利用class id 或者ref 获取元素 ,然后在el.focus(),不知道为什么总报focus not function ,但是下边明显有这个方法可用的,然而也不造怎么用了,
(3)后来百度看,可以自定义指令
这里写图片描述

这里写图片描述
然后v-focus 也没有生效,后来看见百度看见一篇说的很好,决定自己也记录一下方便以后查询记录
inserted 只在元素插入的时候才有用,而且elementui 组件的弹窗复用是通过显示隐藏来的,
所以后来自己模仿他的自己写了原生的input加个v-if,但是现在我在想用elementui 的el-input 加个v-if同样也是可以的吧,本来想试一下,后来接口挂了,就这样写就可以实现弹窗点开自动获取焦点了!笨方法!希望有好方法的,留在下边!
附上之前看的那篇链接https://www.cnblogs.com/hjj2ldq/p/7831972.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI是一款基于Vue.js开发的UI组件库,它提供了大量的组件和工具来简化Web应用程序的开发过程。其中,Form表单ElementUI中一个常用的组件,用于收集用户输入数据并进行校验。 在使用ElementUIForm表单绑定数据时,如果数据不在同一层,可以使用对象的属性路径来实现绑定。具体的步骤如下: 1.首先,需要在Vue实例中定义一个对象,作为数据绑定的容器。这个对象可以包含多个层级,每个层级都是一个属性。 2.在Form表单中,通过设置model属性将Form表单与数据绑定的对象关联起来。这样,Form表单中的输入数据会自动同步到数据绑定的对象中。 3.在Form表单中的每个输入项中,需要通过设置prop属性来指定数据绑定对象的属性路径。属性路径的格式为`'对象的属性名.子对象的属性名.子对象的属性名'`。通过这样设置,输入项的值会自动与数据绑定对象中对应属性路径的值进行双向绑定。 这样,无论数据是不是在同一层,都可以通过设置属性路径来实现数据的绑定。当用户修改输入项的值时,数据绑定对象中对应属性路径的值也会自动更新。同理,当数据绑定对象中对应属性路径的值发生改变时,输入项的值也会自动更新。 总结:ElementUIForm表单绑定数据时,可以通过设置属性路径来实现不同层级数据的绑定。通过这样的设置,Form表单和数据绑定对象之间可以实现自动的双向数据绑定,方便开发人员处理不同层级的数据。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值