??作者主頁：IT技術分享社區

??作者簡介：大家好,我是IT技術分享社區的博主，從事C#、Java開發九年，對數據庫、C#、Java、前端、運維、電腦技巧等經驗豐富。

??個人榮譽： 數據庫領域優質創作者🏆，華為云享專家🏆，阿里云專家博主🏆?

??個人博客：IT技術分享社區

??公眾號/小程序：IT技術分享社區 （運營五年）

??好文章點贊 👍 收藏 ?再看，養成習慣

目錄

一、簡介

什么是 Vue

什么是 Element-UI

Vue 與 Element-UI的關系

二、示例代碼

1、HTML代碼

2、JS文件內容

---

一、簡介

Elementui它是由餓了么前端團隊推出的基于 Vue 封裝的 UI 組件庫，提供PC 端組件，簡化了常用組件的封裝，降低開發難度。

什么是 Vue

Element，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫。它是由餓了么前端團隊推出的基于 Vue 封裝的 UI 組件庫，提供了豐富的 PC 端組件，簡化了常用組件的封裝，大大降低了開發難度。

什么是 Element-UI

Vue 是一套用于構建用戶界面的漸進式 JavaScript 框架 ，開發者只需要關注視圖層， 它不僅易于上手，還便于與第三方庫或既有項目的整合。是基于 MVVM（Model-View-ViewModel 即：視圖層-視圖模型層-模型層）設計思想。提供 MVVM 數據雙向綁定的庫，專注于 UI 層面。

Vue 與 Element-UI的關系

1.Element-Ui 是基于 Vue 封裝的組件庫，簡化了常用組件的封裝，提高了重用性原則；

2. Vue 是一個漸進式框架，Element-Ui 是組件庫。

二、示例代碼

今天就給大家分享一下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 = "";//重新加載數據列表}}
});