vue + elementui: el-form

最近发现form表单的字段很多，但是又不想一个一个写的，想到可以json+for去处理。

第一步：封装一个form组件。

       <el-form
          ref="form"
          :model="form"
          label-width="150px"
          class="demo-dynamic flex"
        >
          <el-form-item
            :label="item.label"
            v-for="(item, index) in form.list"
            :key="item.label + index"
            :rules="item.rules"
            :prop="'list.' + index + '.value'"
            class="item"
          >
            <el-upload
              v-if="item.type == 'image'"
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="item.value" :src="item.value" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <el-input
              v-if="item.type == 'text'"
              placeholder="请输入内容"
              v-model="item.value"
              :disabled="item.disabled"
              class="input"
            ></el-input>
            <el-select
              v-if="item.type == 'select'"
              v-model="item.value"
              placeholder="请选择"
              :multiple="item.multiple"
              :collapse-tags="item.multiple"
            >
              <el-option
                v-for="(e, i) in item.list"
                :key="i"
                :label="e.label"
                :value="e.value"
              >
              </el-option>
            </el-select>
            <el-date-picker
              v-model="item.value"
              v-if="item.type == 'date'"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
            <el-date-picker
              v-model="item.value"
              v-if="item.type == 'time'"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
            <el-select
              v-model="item.value"
              v-if="item.type == 'selectSearch'"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="(e, i) in selectSearchList"
                :key="i"
                :label="e.label"
                :value="e.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>


  props: {
    data: {
      type: Array,
      default: () => [],
    },
   
  },
  data() {
    return {
      form: {
        list: this.data,
      },
    };
  },

第二步：引用组件。

    <Form
      :data="json.list" //引用json文件中数据
    ></Form>

import Form from "@/views/delivery/components/formAll.vue"; //刚才定义的组件

export default {
  components: { Form },

第三步：定义需要展示的json字段。

            "list": [
                {
                    "label": "业务类型", //el-form-item 的label
                    "disabled": true,   //字段是否只读
                    "required": false,  //是否必填
                    "type": "text",    // form中需要展示什么类型的输入框，可自己定义
                    "value": "",       //输入的值
                    "rules": []        //el-form-item的表单字段的校验
                },
                {
                    "label": "所有人",
                    "disabled": false,
                    "required": true,
                    "type": "selectSearch",
                    "value": "",
                    "rules": [
                        {
                            "required": true,
                            "message": "请选择",
                            "trigger": "change"
                        }
                    ]
                },
            ]