layui select 与 vue 的结合使用

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_34179762

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量3.1k

点赞数 1

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/shadowolf/blog/2254298

版权

2019独角兽企业重金招聘Python工程师标准>>>

1. 创建一个select元素

<form class="layui-form layui-form-pane all-account-filter-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Package</label>
            <div class="layui-input-inline">
                <select id="select-package" class="layui-input" lay-search lay-filter="package-select-filter">
                    <option value="">All</option>
                </select>
            </div>
        </div>
    </div>
</form>

2. js引入form

layui.use(['form'], function() {
    let layForm = layui.form;
});

3. 定义vue数据

let app = new Vue({
    el: '#all-account',
    data: {
        packageList: []
    }
});

4. ajax获取数据

getAllPackage(app, $('#select-package'));

function getAllPackage(vueObj, $select) {
    let params = {area: 0};
    sendGetRequest('/package/allPackage', params, function (responseData) {
        let result = getResponseContent(responseData, []);
        initAllPackage(vueObj, result);
        for (let i in vueObj.packageList) {
            $select.append('<option class="select-package-item" value="'+vueObj.packageList[i].packageId+'">'+vueObj.packageList[i].packageName+'</option>');
        }
    });
}

5. 给vue添加update方法，在vue数据更新的时候重新渲染form

let app = new Vue({
    el: '#all-account',
    data: {
        accountList: [],
        packageList: [],
        dateTypeList: [],
        page: {
            count: 0
        }
    },
    updated: function() {
        layForm.render();
    }
});

6. 注意

经过一天的测试，没有找到可以直接使用vue数据双向绑定的办法，假如各位老铁找到好的办法，还请告知一声。
经过测试，发现在业务代码里面进行form重新渲染，还是不起作用，应该是vue的数据绑定需要时间，还没等绑定完成，渲染过程已经执行完了，所以把渲染的过程放到vue数据绑定之后，也就是vue的update方法中执行。

转载于:https://my.oschina.net/shadowolf/blog/2254298