index.vue

<template>
    <el-select
        v-model="valueSync"
        multiple
        filterable
        clearable
        remote
        reserve-keyword
        :disabled="disabled"
        placeholder="请输入关键词"
        @focus="remoteMethod('')"
        :remote-method="remoteMethod"
        :loading="loading">
        <el-option
        v-for="(item) in list"
        :key="item.id"
        :label="$l(item, 'company') + '('+item.companyCode+')'"
        :value="item.id">
        </el-option>
    </el-select>
</template>
<script>
import {getSupplierList, getSupplierPage} from '@/api/ecw/supplier'

export default {
    props:{
        companyType: [String, Number],
        value: [Array],
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            valueSync: [],
            list:[],
            loading: false
        }
    },
    computed:{
    },
    watch:{
        valueSync(val){
            this.$emit('input', val)
        },
        value(val){
            this.valueSync = this.value
            this.init(val)
        }
    },
    created(){
        this.valueSync = this.value
        this.init(this.value)
    },
    methods:{
        init(val){
            if(val === null || val == undefined || val == '') return
            let params = {
                ids: val.toString()
            }
            getSupplierList(params).then(res => {
                this.list = res.data
            })
        },
        remoteMethod(keyword){
            let params = {
                pageSize: 500,
                companyType: this.companyType
            }
            params.keyword = keyword
            this.loading = true
            getSupplierPage(params)
                .then(res => this.list = res.data.list)
                .finally(() => this.loading = false)
        }
    }
}
</script>