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

本文主要讲解关于如何解决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），学习愉快哦！

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)