在VUE+ELEMENT开发中如何快速渲染表单

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

首先在需要渲染的，标签里面绑定: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"
        }
        ....
      ],

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

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

// 选择你要渲染的组件使用v-if等于上面addList里面定义的type，例如vender对应的是一个选择框,

// 还有input框

// 甚至多行文本框，只要你使用v-if配合属性里面的type就能够实现

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