admin/src/views/tools/form/item.vue

55 lines
1.9 KiB
Vue

<template>
<el-form-item :label="field.title" :required="field.required">
<component :is="getComponent(field.name)" v-model="field.value" v-bind="field.props"
:style="{width: field.width}">
<template v-if="field.name === 'select'" #default>
<el-option v-for="(op, idx) in field.options" :key="idx" :label="op.label" :value="op.value"/>
</template>
<template v-else-if="field.name === 'radio'" #default>
<el-radio-button v-if="field.style === 'button'" v-for="(op, idx) in field.options" :key="idx"
:label="op.label" :value="op.value"/>
<el-radio v-else v-for="(op, id) in field.options" :key="id" :label="op.label" :value="op.value"/>
</template>
<template v-else-if="field.name === 'checkbox'" #default>
<el-checkbox-button v-if="field.style === 'button'" v-for="(op, idx) in field.options" :key="idx"
:label="op.label" :value="op.value"/>
<el-checkbox v-else v-for="(op, id) in field.options" :key="id" :label="op.label" :value="op.value"/>
</template>
<template
v-if="field.name === 'upload' && (field.props.listType === 'text' || field.props.listType === 'picture')"
#trigger>
<el-button type="primary" icon="pi-icon-upload-file">
{{ field.btnText }}
</el-button>
</template>
<template
v-if="field.name === 'upload' && field.props.listType === 'picture-card'" #trigger>
<el-icon>
<component :is="'el-icon-plus'"/>
</el-icon>
</template>
<template v-if="field.name === 'upload' && field.tip" #tip>
<div class="el-upload__tip">
{{ field.tip }}
</div>
</template>
<template v-if="field.name === 'button' && field.btnText"
#default>
{{ field.btnText }}
</template>
</component>
</el-form-item>
</template>
<script setup>
import {getComponent} from "./config"
const props = defineProps({
field: {type: Object, default: {}}
})
</script>
<style scoped>
</style>