layui select 与 vue 的结合使用

山海散人

发布于 2021-03-03 03:54:03

1.1K00

代码可运行

文章被收录于专栏：山海散人技术山海散人技术

运行总次数：0

代码可运行

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方法中执行。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/10/29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js