Vue与Layui集成时Select动态加载数据的渲染时序问题及解决方案

作者：模板散步

时间：2026-10-23

本文探讨Vue与Layui结合使用时，因渲染时序差异导致Select组件空白的问题。通过对比模块化导入与嵌套Layui.use两种方案，最终推荐在Vue的updated生命周期中调用layui.form.render方法，并配合axios获取数据，确保Layui表单在Vue数据更新后正确渲染。

文章目录

Vue与Layui渲染时序冲突问题

在Vue与Layui混合开发场景中，由于两者渲染机制存在时间差，偶尔会出现Select下拉框内容为空白的现象。

为解决该问题，需确保在Vue数据完成渲染后，再执行Layui Form的渲染逻辑。

尝试通过模块化导入Layui Form组件，并在Vue数据渲染完成后手动触发渲染。

该方案存在一个小缺陷，有时会报错提示render方法未定义。

这可能是因为Vue先于Layui执行了相关逻辑，导致执行顺序错乱。

最终将Vue代码封装在Layui.use回调函数内，成功解决了该问题。

此方案未必是最优解，若有更佳实现方式，欢迎交流探讨。

页面与JS代码实现

具体页面代码如下：


<div id="demo" class="layui-inline layui-form" lay-filter="test2">
 <select>
  <option v-for="option in options" v-bind:value="option.id">
  {{ option.name }}
 </option> </select>
</div>

JavaScript实现部分：


var vue = new Vue({
   el: '#demo',
   data: {
  option: {}, 
    options: []
   },
      created: function () {
         this.send();
      },
      updated: function () {
         layui.form.render('select','test2');
         console.log(layui.form);
      },
   methods:{
   send() {
    axios({
          method:'get',
          url:'${contextPath}/find?page=1&limit=100'
        }).then(resp => {
         this.options = resp.data.data;
          console.log(resp.data.data);        
        }).catch(resp => {
          console.log('请求失败：'+resp.status+','+resp.statusText);
        });
      } 
   },
  })

以上为Vue结合Layui实现Select动态加载后台数据的完整示例，供参考使用。