Element-ui input输入框无法输入的问题真正解决~

Posted 2023-03-16

参考技术A

一个dialog弹出框里的form表单里的input框(禁止套娃hhhh)。一框两用，新增和修改功能都用同一个dialog。

新增功能的时候一切正常，在input里删除输入都可以。但是一旦变成修改功能，input就整个废掉，原有的数值无法删除，也无法添加新的内容。

查找了很多资料，大部分人都是在input框的@input事件中用 this.$forceUpdate() 强制刷新 解决的

但是这么解决么得感情呀，强扭的瓜不甜，也没搞懂为什么出现了这个问题，还衍生出了新问题：Input的 表单校验失效 了！

那些帖子里好多人在哭诉，看来这么改还是有失民心呀，还是得真正解决。

于是我苦思冥想，为啥子同一个框，新增功能能用，修改功能就坏了呢？他们的差别就是修改功能一开始会请求接口并赋值，那么问题一定出现在这里。

仔细观察之后，终于发现问题所在

一定是因为这个值如此赋值没有被vue监测到，没有经过getter和setter的洗礼，所以视图无法及时更新。

得嘞，改吧就

但是我最后还是有点搞不明白的是，这个form.sorts我在data里明明有初始设置，为什么还是会出现这种情况，有清楚的大神麻烦不吝赐教~

element-ui表单input输入框获取自动聚焦功能

1.问题描述
当用户点击新增按钮时，弹出新增页面，需要form表单中的input框自动获取焦点

2.解决的方法
第一步：给form表单的input输入框添加ref属性

第二步：定义一个方法
我是使用vue开发前端页面的，所以在methods中定义一个方法，在方法中写input输入框自动聚焦的功能

第三步：在mounted中调用定义的方法，在页面结构渲染之后调用这个方法

  mounted() 
    this.onUsernameRef()
  ,
  methods: 
    /**
     * 自动聚焦用户输入框
     */
    onUsernameRef() 
      this.$nextTick(() => 
        this.$refs.usernameRef.focus()
      )