wc24
bba08dadcc
之前 Select/Relation 编辑态根本没 clearable(可选也删不掉),String/Textarea/Date 又恒清。 现统一 String/Textarea/Select/Relation/Date 的 edit 控件 clearable=!required:可选给清空、必填不给。 Relation 清空归一成 null(el-select 单选清空发 '',ObjectId 存 '' 会 cast 报错)。 已知例外:Number 用 el-input-number 无 clearable 属性,只能手动清空输入框、无按钮。
60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<template>
|
|
<template v-if="mode === 'display'">
|
|
<template v-if="Array.isArray(modelValue)">{{ modelValue.join(', ') || '-' }}</template>
|
|
<template v-else>{{ modelValue ?? '-' }}</template>
|
|
</template>
|
|
<div v-else-if="field.multiple" class="tags-input">
|
|
<el-tag v-for="(tag, index) in (modelValue || [])" :key="tag + index" closable @close="removeTag(index)">
|
|
{{ tag }}
|
|
</el-tag>
|
|
<el-input v-model="inputValue" @keyup.enter="addTag" @blur="addTag" :placeholder="$t('base.pressEnter')" />
|
|
</div>
|
|
<el-input v-else :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" :disabled="disabled" :clearable="!field.required" />
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
field: any
|
|
modelValue: any
|
|
mode: 'display' | 'edit' | 'filter'
|
|
disabled?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: any]
|
|
}>()
|
|
|
|
const inputValue = ref('')
|
|
|
|
function addTag() {
|
|
const val = inputValue.value.trim()
|
|
if (!val) return
|
|
const current = Array.isArray(props.modelValue) ? props.modelValue : []
|
|
emit('update:modelValue', [...current, val])
|
|
inputValue.value = ''
|
|
}
|
|
|
|
function removeTag(index: number) {
|
|
const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
|
|
current.splice(index, 1)
|
|
emit('update:modelValue', current)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tags-input {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
.tags-input .el-input {
|
|
width: 120px;
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
</style>
|