ElementUI:文本框实现远程搜索的用法
今天继续给大家分享一下Element UI 多选框组用法笔记,直接上代码!
1、HTML
<el-form-item label="用户列表"> <el-autocomplete class="inline-input" @clear="clearUser" clearable v-model="paramData.userName" :fetch-suggestions="querySearch" placeholder="请输入用户名" @select="handleSelect" > </el-autocomplete> </el-form-item>
2、JS
var vue = new Vue({ data: { paramData: { userId: "", userName: "" }, userList: [] }, created: function() { var self = this; self.initUser(""); }, mounted: function() {}, methods: {}, methods: { initUser: function(userName) { var self = this; var queryParam = {}; $.ajax({ url: xxx, contentType: 'application/json', data: JSON.stringify(queryParam), success: function(resultData) { if (resultData.success) { self.userList = result.data; } else { self.userList = []; } } }); }, handleSelect: function(item) { var self = this; self.paramData.userName = item.value; self.paramData.userId = item.id; self.onSearch(); }, querySearch: function(queryString, cb) { var self = this; var queryParam = {}; $.ajax({ url: xxx, contentType: 'application/json', data: JSON.stringify(queryParam), success: function(resultData) { if (resultData.success) { cb(result.data); } else { cb([]); } } }); }, clearUser: function() { var self = this; self.paramData.userName = ""; self.paramData.userId = ""; //重新加载数据列表 } } });