vue+elementUI实现自定义表单模板组件（二）

前言

在上一节主要解决了表单模板的创建问题，在数据库中的存储格式为字符串。

主要是通过前端处理，保存为 json 数组的字符串，形如

[
  {
   
	label:"文本",
	required:true,
	type:"text",
	icon:"el-icon-s-tools",
	placeholder:"",
	_vModel:"field0"
  }
]

再通过 JSON.stringify() 转为 json 串后存入数据库。

有了表单模板之后，如何在前端进行呈现并编辑，这一节就理清这一思路。

表单编辑

针对表单的页面呈现，只需要处理上述的 json 数组即可。

以下是 html 代码部分

<template>
  <div>
    <el-form label-suffix=""
             label-width="10px">
      <el-form-item v-for="item in formList"
                    :key="item._vModel">
        <template>
          <div>
            <span class="text-red"
                  v-if="item.required">*span>
            {
  {item.label}} 
          div>
        template>
        
        <template v-if="item.type=='text'">
          <el-input v-model="form[item._vModel]"
                    :disabled="readonly"
                    @blur="handleChange"
                    style="max-width:600px"
                    :placeholder="item.placeholder">