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

IT技术分享社区

个人博客网站：https://programmerblog.xyz

文章推荐程序员效率：画流程图常用的工具程序员效率：整理常用的在线笔记软件远程办公：常用的远程协助软件，你都知道吗？51单片机程序下载、ISP及串口基础知识硬件：断路器、接触器、继电器基础知识

来源：oschina

链接：https://my.oschina.net/u/4261184/blog/4930209