如何解决layui+vue导致表单元素渲染位置不对问题

文
章
目
录

• 问题一：layui表单组件值重置
• 问题二：layui表单组件位置不对
• 解决办法：

本文主要讲解关于如何解决layui+vue导致表单元素渲染位置不对问题相关内容，让我们来一起学习下吧！

当使用Vue+layui实现表单提交很方便，但是有许多坑，其根本原因是layui会针对表单的一些标签生成layui自己的dom元素，然后隐藏我们自己含义的dom，我们实际上操作、点击的是layui生成的dom，比如说：radio、select、laydate。

问题一：layui表单组件值重置

如果我们使用vue的数据绑定实现表单数据和vue的数据动态绑定的话，会发现，当我们操作一些input操作时，会导致laydate的值重置。这个根本原因是我们修改了input后，因为vue数据双向绑定，会更新vue的data里的数据，然后根据mvvm模型，vue会更新对应的dom，因为有一些元素layui会自己封装，导致我们更改了值后没有更新到vue，所以vue对象里那个字段还是初始值，所以会导致重置。解决办法：查找layui里对应修改了值的回调函数，更新值后直接更新vue的属性，就可以实现绑定了。

问题二：layui表单组件位置不对

以select为例。查看源码可以大概率知道，在渲染的时候可能会读取元素的位置信息：

举例代码如下：

<div class=\"layui-form\">
        <div class=\"layui-form-item\" v-if=\"xxxx\">
            <label class=\"layui-form-label\">手机</label>
            <div class=\"layui-input-block\">
                <input type=\"tel\" name=\"phone\" lay-verify=\"required|phone\" class=\"layui-input demo-phone\">
            </div>
        </div>
        <div class=\"layui-form-item\">
            <label class=\"layui-form-label\">选择框</label>
            <div class=\"layui-input-block\">
                <select name=\"city\" lay-verify=\"required\">
                    <option value=\"\"></option>
                    <option value=\"0\">北京</option>
                    <option value=\"1\">上海</option>
                    <option value=\"2\">广州</option>
                    <option value=\"3\">深圳</option>
                    <option value=\"4\">杭州</option>
                </select>
            </div>
        </div>
    </div>

当v-if为false时，vue会将dom从dom树上摘去，但是在这之前layui已经计算好了位置信息了。这之后layui会根据这个位置放置dom。但是我们已经摘除了上面那个dom，所以会导致位置错乱。

解决办法：

使用v-show 代替v-if。因为v-show只是更改了dom的display属性。

以上就是关于如何解决layui+vue导致表单元素渲染位置不对问题相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！