❤️作者主页：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 = "";//重新加载数据列表}}
});