layui select 與 vue 的結合使用

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