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

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