<template>
<div class="from-table">
<el-form :model="form" label-width="auto" style="width:100%; display: flex; flex-wrap: wrap;">
<el-form-item style="margin-right: 40px;"
v-for="item in FormLable" :key="item.key"
:label="item.label"
:style="{'width': item.width ? item.width : '180px' }">
<div class="input-label" :class="{'nameStyle': item.nameStyle}">{{ item.name }}</div>
<el-input v-if="item.type == 'input'" v-model="form[item.key]" :placeholder="item.placeholder || ''" />
<el-select style="width: 100%;" v-if="item.type == 'select'" v-model="form[item.key]" :placeholder="item.placeholder || ''">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
<el-date-picker
v-if="item.type == 'date'"
v-model="form[item.key]"
type="date"
:placeholder="item.placeholder || ''"
/>
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts" setup>
import { computed, PropType } from 'vue';
// 定义表单项标签配置类型
interface FormLabelItem {
label?: string;
name?: string; // 对应表单字段名（如 'username'）
placeholder?: string
key: string
type: string
width?: string
nameStyle?: boolean
}
// 定义表单数据对象类型
interface FormData {
[key: string]: any; // 动态字段（如 name: string）
}
const props = defineProps({
modelValue: {
type: Object as PropType<FormData>,
default: ()=> {
return {}
}
},
FormLable: {
type: Array as PropType<FormLabelItem[]>,
default: ()=> {
return []
}
}
})
const emit = defineEmits([
'update:modelValue'
])
const form = computed({
get () {
return props.modelValue
},
set (value) {
emit('update:modelValue', value)
}
})
</script>
<style lang="scss" scoped>
.from-table {
:deep(.el-input__wrapper) {
border-bottom: 1px solid #DDDDDD !important;
}
.input-label {
width: 100%;
font-size: 12px;
color: #777777 !important;
}
.nameStyle {
font-size: 16px !important;
color: #000 !important;
}
}
</style>
调用时
<Form v-model="serviceData" :FormLable="serviceLable"></Form>
const serviceData = ref({})
const serviceLable:any = [
{
name: '',
key: '',
label: '',
placeholder: '请选择',
type: 'select',
}
]