element中的模糊查询怎么用

//封装的组件
<template id="employee-auto-select">
    <span>
        <el-autocomplete 
            ref="listSelect" 
            size="small" v-bind:style="{width: width}" 
            placeholder="按账号模糊搜索..." 
            v-model="selectValue" 
            clearable
            :fetch-suggestions="querySearch" 
            :debounce=0
            @select="handleSelect"></el-autocomplete>
    </span>
</template>
<script>
    Vue.component('employee-auto-select', {
        //name: '客户下拉选择',
        template:'#employee-auto-select',
        props: {
            width: {
                type: String,
                default: '150px'
            },
            clearable: {
                type: Boolean,
                default: true,
		    },
        },
        data: function () {
            return {
                loadObj : {
                    datatype: 'json',
                    url: ''//这里是接口地址
                },
                selectValue: '',
                selectData: {},
                options: [],
            }
        },
        methods: {
            querySearch: function (queryString, cb) {
                // debugger;
                if (!utils.isEmpty(queryString)) {
                    this.loadObj.data = {
                        account: queryString
                    }
                    this.loadByData(cb)
                } else {
                    cb([]);
                }
            },
            loadByData: function (cb) {
                let me = this;
                loadUri.RequestData(me.loadObj).then(data => {
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            data[i].value = data[i].employeeName + '[' + data[i].employeeAccount + ']';
                        }
                    } else {
                        data = [{ value: '暂无可匹配数据!' }];
                    }
                    cb(data);
                }).catch(err => {
                    return
                });
            },
            //=====================================
            handleSelect(data) {
                debugger
                let me = this;
                if (!utils.isEmpty(data) && !utils.isEmpty(data.employeeId)) {
                    me.selectData = data;
                } else {
                    me.selectData = {};
                }
                this.$emit("employeeautoselect", me.selectData);
            },
            /======================================
            clearData() {
                debugger
                this.selectValue = '';
                this.$emit('employeeautoselect');
            },
            getValue() {
                let me = this;
                let id = '';
                if (!utils.isEmpty(me.selectValue) && !utils.isEmpty(me.selectData) && !utils.isEmpty(me.selectData.employeeId)) {
                    id = me.selectData.employeeId;
                } else {
                    id = '';
                    utils.MessageInfo('人员不存在,请重新选择人员选项!');
                }
                return id;
            },
            setNameValue(name, value) {
                // debugger;
                let me = this;
                me.selectValue = name;
                me.selectData = {
                    value: me.selectValue,
                    employeeId: value,
                };
            },
        }
    });
</script>
//父组件
 <employee-auto-select ref="lastUpdatorId" style="width:150px" @employeeautoselect="employeeAutoSelected"></employee-auto-select>

<script>
     employeeAutoSelected: function (item) {
                debugger
                let me = this;
                if (!utils.isEmpty(item)) {
                    if(!utils.isEmpty(item.employeeAccount)){
                        this.searchData.account = item.employeeAccount;
                    }else{
                        this.searchData.account = '';
                    }
                }else{
                    this.searchData.account = '';
                }
            },

</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值