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