ElementUI:文本框实现远程搜索的用法
生活随笔
收集整理的這篇文章主要介紹了
ElementUI:文本框实现远程搜索的用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天繼續給大家分享一下Element UI 多選框組用法筆記,直接上代碼!
1、HTML
<el-form-item label="用戶列表"><el-autocompleteclass="inline-input"@clear="clearUser"clearablev-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 = "";//重新加載數據列表}} });IT技術分享社區
個人博客網站:https://programmerblog.xyz
文章推薦程序員效率:畫流程圖常用的工具程序員效率:整理常用的在線筆記軟件遠程辦公:常用的遠程協助軟件,你都知道嗎?51單片機程序下載、ISP及串口基礎知識硬件:斷路器、接觸器、繼電器基礎知識
總結
以上是生活随笔為你收集整理的ElementUI:文本框实现远程搜索的用法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 概率论与数理统计(第四版) 第二章:随机
- 下一篇: 【Python】基于Python的百度迁