tire-platform-ui/src/components/dicSelect/main.vue

<template>
    <!-- 中文下拉 -->
    <el-select v-model="value" @input="$emit('selectedValue', value)" :placeholder="'请输入 ' + placeholder"
        @change="selectChange" @clear="clear" :clearable="clearable" :multiple="multiple" :filterable="filterable"
        :remote="remote" :remote-method="remoteMethod" :loading="loading" :size="size" :disabled="disabled">
        <el-option v-for="item in options" :key="item[key]" :label="item[label]" :value="item[keyValue?keyValue:label]">
        </el-option>
    </el-select>
</template>

<script>
import { getDicinit } from "@/api/dicSelect/index";
export default {
    data() {
        return {
            options: [],
            loading: false,
            data: {}
        }
    },
    props: {
        activateCreated: {
            type: Boolean,
            default: true
        },
        key: {
            type: [String, Number],
            default: null
        },
        label: {
            type: String,
            default: ''
        },
        keyValue: {
            type: [String, Number],
            default: null
        },
        res: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '请输入'
        },
        clearable: {
            type: Boolean,
            default: true
        },
        value: {
            type: [String, Number],
            default: ''
        },
        method: {
            type: String,
            default: 'GET'
        },
        url: {
            type: String,
            default: ''
        },
        dataName: {
            type: String,
            default: ''
        },
        multiple: {
            type: Boolean,
            default: false
        },
        filterable: {
            type: Boolean,
            default: false
        },
        remote: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'small'
        },
        disabled: {
            type: Boolean,
            default: false
        },
    },
    model: {
        prop: "value",
        event: "selectedValue"
    },
    created() {
        if (this.activateCreated) {
            this.getDicData()
        }
    },
    methods: {
        remoteMethod(query) {
            if (query !== '') {
                setTimeout(() => {
                    this.data[this.dataName] = query
                    this.getDicData()
                }, 200);
            } else {
                setTimeout(() => {
                    this.data = this.$options.data().data
                    this.getDicData()
                }, 200);
            }
        },
        getDicData() {
            this.loading = true
            getDicinit(this.method, this.url, this.data).then(res => {
                if (this.res) {
                    this.options = res.data.data[this.res]
                } else {
                    this.options = res.data.data
                }
            }).finally(() => {
                this.loading = false;
            })
        },
        IdGetDicData(data) {
            this.loading = true
            getDicinit(this.method, this.url, data).then(res => {
                if (this.res) {
                    this.options = res.data.data[this.res]
                } else {
                    this.options = res.data.data
                }
            }).finally(() => {
                this.loading = false;
            })
        },
        selectChange(row) {
            this.options.forEach(e => {
                if (row == e[this.label]) {
                    this.$emit('selectChange', e)
                }
            })
        },
        clear() {
            if (this.remote) {
                this.getDicData()
            }
            this.$emit('selectChange', null)
        }
    }
}
</script>

<style lang="scss" scoped></style>