element ui里怎么实现多个input框上下对齐？

Posted 2023-04-01

怎样实现这种效果

参考技术A 很明显这些其实是div 里面放input的，将input的样式去掉，通过给 div 设置边框来伪装出来的 参考技术B element-ui本身有form表单组件吧，把这些用form表单包裹住，应该就是自动上下对齐的啊

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

参考技术A

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

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

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

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

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

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

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

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

得嘞，改吧就

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