1. 首页
  2. >
  3. 前端开发
  4. >
  5. Vue

ElementUI:文本框实现远程搜索的用法

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 = "";             //重新加载数据列表         }     } });