<template>
|
<div class="flex-items-center">
|
<span class="flex-0 mr-2" v-if="data?.title">{{ data?.title }}</span>
|
<el-input v-if="!isSelect" :disabled="disabled" v-model="modelValue" @input="stringInputInput" clearable></el-input>
|
<el-select class="w-[268px]" v-else :disabled="disabled" v-model="modelValue" @change="stringInputInput" filterable multiple clearable collapse-tags collapse-tags-tooltip>
|
<el-option v-for="item in data?.origin?.value_list" :key="item" :value="item" :label="item"></el-option>
|
</el-select>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed } from 'vue';
|
defineOptions({
|
inheritAttrs: true,
|
});
|
|
const emit = defineEmits(['change']);
|
const props = defineProps(['data', 'disabled']);
|
const isSelect = computed(() => {
|
return props.data?.origin?.value_list?.length > 0;
|
});
|
const modelValue = defineModel();
|
const stringInputInput = (val) => {
|
let finalValue;
|
if (!val) {
|
finalValue = '';
|
} else {
|
finalValue = val.join(',');
|
}
|
emit('change', finalValue);
|
};
|
</script>
|
<style scoped lang="scss">
|
|
:deep(.el-select__tags-text){
|
// max-width: 82px !important;
|
}
|
</style>
|
