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

林梓阳

已于 2022-08-17 18:22:45 修改

阅读量1.1k

点赞数 2

分类专栏： Vue.js 文章标签： vue.js elementui 前端

于 2022-05-31 10:02:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43930421/article/details/125058752

版权

本文档介绍如何使用Vue和ElementUI构建自定义表单模板组件。在上一部分，已经解决了表单模板的创建和数据库存储问题。本节重点讲述如何在前端展示并编辑这些模板，通过处理JSON数组来渲染表单，并提供了HTML代码示例及组件的参数说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

主要是通过前端处理，保存为 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">

最低0.47元/天解锁文章