<template>
|
<div class="info-field">
|
<label>{{ label }}：</label>
|
<template v-if="editing && type === 'select'">
|
<el-select :value="value" size="small" style="width:100%" @change="$emit('change', $event)">
|
<el-option v-for="o in options" :key="o.value || o" :label="o.label || o" :value="o.value || o" />
|
</el-select>
|
</template>
|
<template v-else-if="editing">
|
<el-input :value="value" size="small" @input="$emit('update:modelValue', $event)" />
|
</template>
|
<span v-else>{{ displayValue }}</span>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "InfoField",
|
props: {
|
label: { type: String, default: "" },
|
value: { default: "" },
|
editing: { type: Boolean, default: false },
|
type: { type: String, default: "text" },
|
options: { type: Array, default: () => [] },
|
},
|
computed: {
|
displayValue() {
|
if (this.type === 'select' && this.options.length) {
|
const opt = this.options.find(o => (o.value || o) === this.value);
|
return opt ? (opt.label || opt) : (this.value || "-");
|
}
|
return this.value || "-";
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.info-field { font-size: 14px; line-height: 2; }
|
.info-field label { color: #909399; }
|
.info-field span { color: #303133; }
|
</style>
|
