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

IT技术分享社区

已于 2022-12-21 17:20:02 修改

阅读量2.1k

点赞数

分类专栏：前端文章标签： html elementui 前端 vue.js javascript

于 2021-01-26 07:34:14 首次发布

欢迎转载，请保留作者的链接，文章会同步更新到微信公众号：欢迎转载，请保留作者的链接，文章会同步更新到个人微信公众号：小明互联网技术分享社区，个人网站 https://programmerblog.xyz/

本文链接：https://blog.csdn.net/xishining/article/details/113207240

版权

前端专栏收录该内容

28 篇文章 3 订阅

订阅专栏

❤️作者主页：IT技术分享社区

❤️作者简介：大家好,我是IT技术分享社区的博主，从事C#、Java开发九年，对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。

❤️个人荣誉：数据库领域优质创作者🏆，华为云享专家🏆，阿里云专家博主🏆

❤️个人博客：IT技术分享社区

❤️公众号/小程序：IT技术分享社区（运营五年）

❤️好文章点赞 👍 收藏 ⭐再看，养成习惯

一、简介

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