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