【踩坑日记】给Layui的select动态加载数据

情景再现

html

<div class="layui-inline">
                    <label class="layui-form-label">所入仓库</label>
                    <div class="layui-input-block">
                        <select name="warehouseId" id="warehouseId" lay-verify="">
                            <option value=""></option>
                        </select>
                    </div>
                </div>

利用axios请求后端数据

$(window).load(function () {
            axios.post("/getwarehouse").then((res) => {
                console.log("加载完成")
                console.log(res.data.data)
                var oSelect = document.getElementById("warehouseId");
                var item = res.data.data
                for (let i = 0; i < res.data.data.length; i++) {
                    var opt = document.createElement("option");
                    opt.setAttribute("value",item[i].id)
                    opt.innerHTML = item[i].warehouseName;
                    oSelect.append(opt)
                }
            });
            layui.form.render('select','test1');

html中的dom元素可以看出option是加载成功的，但是layui.form.render没有起作用重新渲染。

解决方案

render部分设置一个setTimeout来延迟重新渲染即可

setTimeout(()=>{
                layui.form.render('select','test1');
            },500);