SOURCE

console 命令行工具 X clear

                    
>
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;
}