layui+vue实现select动态加载后台数据

版权声明：如需转载，请注明来源 https://blog.csdn.net/qq_28073073/article/details/86649301

vue + layui 修改 获取到值加载不出来 -- 渲染问题 

layui动态渲染之后，需要 layui.form.render(); 重新渲染一次数据

//页面代码

<select name="Classification" lay-verify="Classification" class="selector">
    <option value="">请选择分类</option>
    <option v-for="(x,i) of selectList" :value="x.Id">{{x.Name}}</option>
</select> 

// js代码 

$.ajax({
    type: "get",
    url: Global.baseUrl + "GetClassification",
    dataType: "json",
    success: function (data) {
        vue.selectList = data.list;
        layui.form.render();//重新渲染
    },
    error: function (e) {
        alert('数据获取失败');
    }
});

 经过测试，还是会出现select里面是空白的情况，这是由于layui form渲染与vue渲染有时间差

最后layui.form.render();延迟加载，问题解决

//js代码

$.ajax({
    type: "get",
    url: Global.baseUrl + "GetClassification",
    dataType: "json",
    success: function (data) {
          vue.selectList = data.list;
          setTimeout(function () {  
              layui.form.render();//延迟重新渲染
          },10);          
    },
    error: function (e) {
        alert('数据获取失败');
    }
});