最近使用VUE+ELEMENT-UI开发项目是总结了如何在表单过多的情况下快速渲染表单的方法。

<el-form
            :rules="rules"
            :inline="true"
            :model="deviceForm"
            ref="deviceForm"
            label-width="100px"
            class="demo-ruleForm"
            status-icon
            :show-message="false"
          >

首先在需要渲染的，<el-form>标签里面绑定:model为一个对象里面是表单内部需要监控的数据。例如：

deviceForm: {
        dbDevicecode: null, // 设备编码
        dbDevicename: null, // 设备名称
        dbIp: null, // IP
        dbPort: null, // 端口
        dbLoginname: null, // 账号
        dbPassword: null, // 密码
        dbStatus: null, // 设备状态
        dbOnlinestatus: null, //在线状态
        dbAddress: null, // 设备地址
        dbMac: null, // 物理地址
        dbExtendcode: null, // 扩展编码
        dbRemark: null // 描述
      },

然后把表单中需要渲染的组件类型在data中用一个对象数组定义出来

addList: [
        {
          title: "选择厂商",
          info: "请选择厂商",
          type: "vender",
          name: "vender"
        },
        {
          title: "选择模板",
          info: "请选择模板",
          type: "template",
          name: "template"
        },
        {
          title: "设备编号",
          info: "请输入编号",
          type: "input",
          name: "dbDevicecode"
        }
        ....
      ],

再在<el-form-item>标签中使用v-for绑定addList，并且绑定label为item.title，

<el-form-item
              v-for="item in addList"
              :key="item.title"
              :label="item.title"
              :prop="item.name"
            >

这里使用props主要是配合之后对表单的验证，下一篇文章会讲到。
之后就到了最重要的一步了。

// 选择你要渲染的组件使用v-if等于上面addList里面定义的type，例如vender对应的是一个选择框,
<el-select
                v-if="item.type=='vender'"
                v-model.trim="venderOptions[item.name]"
                size="mini"
                @change="handleVenderChange"
              >
// 还有input框
<el-input size="mini" v-if="item.type=='input'" v-model.trim="deviceForm[item.name]"></el-input>
// 甚至多行文本框，只要你使用v-if配合属性里面的type就能够实现
<el-input
                v-else-if="item.type=='textarea'"
                style="margin-top:10px;"
                v-model.trim="deviceForm[item.name]"
                type="textarea"
                resize="none"
                :autosize="{ minRows: 3, maxRows: 4}"
                placeholder="请输入描述"
              ></el-input>

今天的文章就讲到这里了，如果有不懂得可以留言告诉我，第一次写文章，如有不好多多包涵！