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

作者:模板散步时间:2026-10-23 11:21:52浏览:336

本文探讨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动态加载后台数据的完整示例,供参考使用。

作者最新文章
相关文章
更多