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

最新推荐文章于 2024-06-25 09:30:27 发布

礼拜八

最新推荐文章于 2024-06-25 09:30:27 发布

阅读量2.6k

点赞数 1

分类专栏：前端文章标签： layui知识点 select 前端bug layui渲染 layui+vue

本文链接：https://blog.csdn.net/qq_28073073/article/details/86649301

版权

本文介绍了在layui和vue结合使用时遇到的select动态加载数据问题。当layui渲染与vue渲染存在时间差，导致select显示为空。通过在js代码中使用layui.form.render()延迟加载，成功解决了这个问题。

摘要由CSDN通过智能技术生成

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渲染与