侧边栏壁纸
博主头像
IT技术分享社区博主等级

一个有态度的互联网技术交流平台

  • 累计撰写 225 篇文章
  • 累计创建 17 个标签
  • 累计收到 23 条评论

目 录CONTENT

文章目录

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

IT技术分享社区
2022-05-28 / 0 评论 / 1 点赞 / 576 阅读 / 226 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-28,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

qd
今天继续给大家分享一下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 = "";
            //重新加载数据列表
        }
    }
});
 
 
1
广告 广告
博主关闭了所有页面的评论