<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 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({
|
type: Array,
|
default: () => [],
|
});
|
const stringInputInput = (val) => {
|
let finalValue;
|
if (!val) {
|
finalValue = '';
|
} else {
|
finalValue = val.join(',');
|
}
|
emit('change', finalValue);
|
};
|
</script>
|
<style scoped lang="scss"></style>
|
