element for vue封装下拉搜索组件

组件AutomaticCompletion.vue内容

<template>
    <div class="AutoCompleteInput">
        <el-input v-popover:popover v-model.trim="name" @focus="focusQueryName" @input="changeQueryName" :placeholder="placeholder" @blur="blurQueryName" clearable @clear="clearQueryName">
            <i class="el-icon-search el-input__icon" slot="suffix"></i>
        </el-input>
        <el-popover ref="popover" placement="bottom-start" trigger="focus" v-model="popoverShow">
            <div  class="popover-content">
            <div class="popover-list">
                <div v-for="(item,index) in dataList" :key="index" @click="getiteminfo(item)" 
                class="popover-list-item">
                {{item[getParamsName]}}
                </div>
            </div>
            <el-pagination small layout="prev, pager, next" 
            :page-size="searchData.pageSize" :total="totlepage"
            :current-page="searchData.pageNum" @current-change="changePage"></el-pagination>
            </div>
        </el-popover>
    </div>
</template>
<script>
import CommonServer from "@/api/Common";
export default {
    name:'AutomaticCompletion',
    props:{
        placeholder:{
            type:String,
            default:'请输入'
        },
        urlServer:{
            type:String,
            default:''
        },
        paramsName:{
            type:String,
            default:''
        },
        getParamsName:{
            type:String,
            default:''
        },
        paramsNameObj:{
            type:Array,
            default:()=>[]
        }
    },
    mounted(){

    },
    data(){
        return{
            dataList:[],
            totlepage:0,
            popoverShow:false,
            name:'',
            searchData:{
                pageSize:5,
                pageNum:1
            }
        }
    },
    methods:{
        // 获取焦点
        focusQueryName(){
            this.$emit('getDataInfo','')
            this.name = ''
            this.popoverShow = true
            this.searchData.pageNum = 1
            this.getDataList()
        },
        // 输入查询
        changeQueryName(){
            this.searchData.pageNum = 1
            this.getDataList()
        },
        // 信息获取（选择）
        getiteminfo(item){
            this.name = item[this.getParamsName]
            this.$emit('getDataInfo',item)
            this.popoverShow = false
        },
        // 失去焦点
        blurQueryName(){
            let currentName = this.name
            if(this.dataList.length>0){
                this.dataList.map(item=>{
                    if(item[this.getParamsName]==currentName){
                        this.$emit('getDataInfo',item)
                        return false
                    }else{
                        this.$emit('getDataInfo',{'setname':this.name})
                    }
                })
            }else{
                this.$emit('getDataInfo',{'setname':this.name})
            }
        },
        // 清除
        clearQueryName(){
            this.name = ''
            this.$emit('getDataInfo','')
            this.searchData.pageNum = 1
        },
        // 父组件有默认值
        getName(val){
            this.name = val
        },
        // 分页查询
        changePage(val){
            this.popoverShow = true
            this.searchData.pageNum = val
            this.getDataList()
        },
        // 获取渠道
        getDataList(){
            let params = Object.assign({},this.searchData)
            if(this.paramsNameObj.length>0){
                this.paramsNameObj.map(item=>{
                    if(this.paramsName==item.label){
                        params[item.label] = this.name 
                    }else{
                        params[item.label] = item.value
                    }
                    
                })
            }else{
                params[this.paramsName] = this.name
            }
            CommonServer.getSearchList(this.urlServer,params).then(res=>{
                let { code,data,msg } = res
                if(code=='00000'){
                    this.dataList = data.records
                    this.totlepage = data.total
                }else{
                    this.dataList = []
                    this.totlepage = 0
                    this.$message.error(msg)
                }
            }).catch(error=>{
                this.dataList = []
                this.totlepage = 0
                this.$message.error(error)
            })
        },
    }
}
</script>

<style>

</style>

Common方法相关

// 下拉搜索
 getSearchList (serveUrl,params) {
     return request({
         method: 'Post',
         url: serveUrl,
         params: params,
     })
 },

页面中的使用

<automatic-completion ref="supplierName" :paramsNameObj="paramsobject" getParamsName="supplierName"
            @getDataInfo='getSupplierNameInfo' paramsName="supplierName" :urlServer="urlServer" placeholder="请选择"></automatic-completion>

//data定义多个参数查询，单个参数无需定义该项
paramsobject:[
    {
       'label':'supplierName' ,
       'value':''
    },
    {
        'label':'contractModelNo',
        'value':''
    }
]
//访问子组件方法
this.$refs.supplierName.clearQueryName()