PagedSelect.vue

<template>
    <el-select
        :id="id"  v-model="model" v-bind="$attrs"
        v-on="$listeners" 
        :disabled="disabled" 
        :clearable="clearable"
        :multiple="multiple"
        :loading="loading"
        @change="handelSelChange">
        <div v-if="queryable" style="width:90%;margin-left:5%">
            <el-input v-model="cond">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="getOptions(1)" @keyup.enter="getOptions(1)"></i>
            </el-input>
        </div>
        <el-option 
            v-for="item in options" 
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
        <el-pagination 
            :total="total" 
            :current-page="current" 
            :page-size="pagesize" 
            @current-change="handleCurrentChange" 
            layout="prev,pager,next">
        </el-pagination>
    </el-select>
</template>
<script>
import Request from '~/utils/request'
export default {
    props:{
        value: {
            type:[String,Number,Array],
            default: undefined
        },
        disabled: {
            type: Boolean,
            default: false
        },
        placeholder:{
            type:String,
            default: '请选择'
        },
        clearable: {
            type: Boolean,
            default: true
        },
        multiple: {
            type: Boolean,
            default: false
        },
        id: {
            type: String,
            default: ''
        },
        remote:{
            type:Boolean,
            default:true
        },
        filterable:{
            type:Boolean,
            default:true
        },
        url:{
            type:String,
            required:true
        },
        code:{
            type:String,
            required:true
        },
        name:{
            type:String,
            required:true
        },
        pagesize:{
            type:Number,
            default:20
        },
        queryable:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return {
            loading:false,
            options:[],
            total:0,
            current:1,
            isMounted:false,
            cond:'',
        }
    },
    computed:{
        model:{
            get(){
                if(this.multiple && typeof this.value == 'string'){
                    return this.value.split(',')
                }else{
                    return this.value
                }
            },
            set(newVal) {
                //this.value = newVal.join(',')
                console.log(newVal)
                if(this.multiple){
                    let valStr = newVal.join(',')
                    this.$emit('input', valStr)
                }else{
                    this.$emit('input', newVal)
                }
                //this.$emit('update:value',newVal)
            }
        }
    },
    watch:{
        /*model:{
            handler(newVal,oldVal){
                this.$emit('update:value',newVal)
            },
            deep:true
        },*/
        current(val){
            
        }
    },
    mounted(){
        this.getOptions(1)
    },
    methods:{
        async getOptions(page){
            if (this.url) {
                let self = this
                self.loading = true
                self.options = []
                let requrl = self.url+"?pageIndex="
                    +page
                    +"&pageSize="+self.pagesize
                Request.post(requrl, {'cond':this.cond}).then(res => {
                    if (res.code === SUCCESS) {
                        for(let item of res.data){
                            let obj = {}
                            obj.key = item[self.code]
                            obj.label = item[self.name]
                            obj.value = item[self.code]
                            self.options.push(obj)
                        }
                        self.total = res.pageInfo && res.pageInfo.total || 0
                        self.loading = false
                    }
                }).catch(err=> {
                    self.loading = false
                })
            }
        },
        handleCurrentChange(val){
            this.current = val
            this.getOptions(val)
        },
        handelSelChange(sels){
            
        }
    }
}
</script>