console
new Vue({
el: '#root',
data() {
return {
province: '',
ad: {
},
formData: {},
viewModel: {},
}
},
created() {
setTimeout(() => {
let rsp = {
viewModel: [{
name: '姓名',
key: 'userName',
prop: 'userName',
dataType: 'input'
},
{
name: '出生日期',
key: 'birthday',
prop: 'birthday',
dataType: 'date'
},
{
name: '出生地',
key: 'address',
prop: 'address',
dataType: 'select',
valueList: [{
label: '北京',
value: '001'
},
{
label: '上海',
value: '002'
},
{
label: '江苏',
value: '003'
}]
}]
}
rsp.viewModel.forEach(item => this.formData[item.key] = '');
this.viewModel = rsp.viewModel;
},
1000);
}
})
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id='root'>
<el-form
ref="formData"
:model="formData"
label-width="100px"
label-position="left"
size="mini">
<el-form-item
v-for="item in viewModel"
:prop="item.prop"
:label="item.name">
<template v-if="item.dataType === 'select'">
<el-select
v-model="formData[item.key]"
placeholder="请选择">
<el-option
v-for="option in item.valueList"
:key="option.value"
:label="option.label"
:value="option.value"
>
</el-option>
</el-select>
</template>
<template v-else-if="item.dataType === 'date'">
<el-date-picker v-model="formData[item.key]" placeholder="请选择日期"></el-date-picker>
</template>
<template v-if="item.dataType === 'input'">
<el-input v-model="formData[item.key]" class="input-width"></el-input>
</template>
</el-form-item>
</el-form>
</div>
.input-width {
width: 200px;
}