根据组件类型与条件动态添加下拉框及选项

最新推荐文章于 2024-07-30 19:02:49 发布

白纸一样

最新推荐文章于 2024-07-30 19:02:49 发布

阅读量1.3k

点赞数 1

分类专栏：业务场景组件封装文章标签： json 前端 javascript vue

本文链接：https://blog.csdn.net/qq_45670042/article/details/125387467

版权

本文介绍了在低代码平台中，根据用户拖拽表单生成的JSON数据动态创建下拉列表组件的实现过程。涉及组件包括数字和文本类型的条件判断，以及用户选择后的数据保存与回显。利用ES6解构赋值处理JSON，通过Vue组件生命周期管理增删下拉列表，实现数据的有效保存和回显。

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

前言

本次在做低代码平台时，遇见了一个稍微有些复杂的业务场景，需求描述：

根据用户拖拽表单生成的JSON数据(本次采用了FormGenerator去生成JSON数据)，生成对应的所有组件的下拉列表，并在流程图的边（节点连接线）上添加条件判断。
当用户点击流程图的边时，生成该边上对应的所有组件的下拉列表，在点击某个组件的选项后，生成对应组件的下拉列表组件，在用户取消选择后，对应组件的下拉列表组件随之消失。
针对不同组件对应的下拉列表，要求有不同的条件判断，例如：数字类型的需要有范围选择、大小判断、为空不为空，等条件；文本组件有包含不包含，等条件。
当用户选择后，自动保存到当前边对应的JSON数据，若用户的选择无效，则不保存。
要求能够回显用户选择的数据，即点击不同边时，回显该边上JSON对应的所有下拉列表组件。

经过梳理后，其实逻辑看起来也不是特别复杂，不过当时确实是有点被难倒了，主要原因就是一些细节性的问题没有考虑到，然后流程图也需要去学习如何操作，时间上有些紧，同时也在思考如何写能够更便于维护。其次就是没有一个清晰的该处业务的流程思考，不过后来捋了捋也就差不多啦，所以说三思而后行啊。

三思而后行：多思考几遍，自己又觉得自己行了哈哈

Logicflow和FromGenerator就不多说了，虽然也有点坑，但都是轮子，主要记录下这块业务场景如何实现的。

组件展示

包含所有组件的下拉列表
对应组件的下拉列表组件
根据条件改变输入形式

在这里插入图片描述

具体实现

JSON数据处理

处理JSON，不得不提一嘴ES6结构赋值，属实是属性提取的利器。
原JSON大概长这个样子，为了区别不同类型的组件，和表单那边的小伙伴约定了两个字段，tag用于区分组件输入框的类型，typeNumber用于区分下拉列表内容有哪些

{
   
  "fields": [
    {
   
      "__config__": {
   
        "label": "单行文本",
        "labelWidth": null,
        "showLabel": true,
        "changeTag": true,
        "tag": "el-input",
        "tagIcon": "input",
        "required": true,
        "layout": "colFormItem",
        "span": 24,
        "document": "https://element.eleme.cn/#/zh-CN/component/input",
        "regList": [],
        "formId": 101,
        "renderKey": 1649927471934,
        "typeNumber": 0
      },
      "__slot__": {
   
        "prepend": "",
        "append": ""
      },
      "placeholder": "请输入单行文本",
      "style": {
   
        "width": "100%"
      },
      "clearable": true,
      "prefix-icon": "",
      "suffix-icon": "",
      "maxlength": null,
      "show-word-limit": false,
      "readonly": false,
      "disabled": false,
      "__vModel__": "field101"
    },
    {
   
      "__config__": {
   
        "label": "多行文本",
        "labelWidth": null,
        "showLabel": true,
        "tag": "el-input",
        "tagIcon": "textarea",
        "required": true,
        "layout": "colFormItem",
        "span": 24,
        "regList": [],
        "changeTag": true,
        "document": "https://element.eleme.cn/#/zh-CN/component/input",
        "formId": 102,
        "typeNumber": 1,
        "renderKey": 1649927472786
      },
      "type": "textarea",
      "placeholder": "请输入多行文本",
      "autosize": {
   
        "minRows": 4,
        "maxRows": 4
      },
      "style": {
   
        "width": "100%"
      },
      "maxlength": null,
      "show-word-limit": false,
      "readonly": false,
      "disabled": false,
      "__vModel__": "field102"
    },
    {
   
      "__config__": {
   
        "label": "级联选择",
        "showLabel": true,
        "labelWidth": null,
        "tag": "el-cascader",
        "tagIcon": "cascader",
        "layout": "colFormItem",
        "defaultValue": [
          1,
          2
        ],
        "dataType": "dynamic",
        "span": 24,
        "required": true,
        "regList": [],
        "changeTag": true,
        "document": "https://element.eleme.cn/#/zh-CN/component/cascader",
        "formId": 111,
        "typeNumber": 9,
        "renderKey": 1649942215947
      },
      "options": [
        {
   
          "id": 1,
          "value": 1,
          "label": "选项1",
          "children": [
            {
   
              "id": 2,
              "value": 2,
              "label": "选项1-1"
            }
          ]
        }
      ],
      "placeholder": "请选择级联选择",
      "style": {
   
        "width": "100%"
      },
      "props": {
   
        "props": {
   
          "multiple": false,
          "label": "label",
          "value": "value",
          "children": "children"
        }
      },
      "show-all-levels": true,
      "disabled": false,
      "clearable": true,
      "filterable": false,
      "separator": "/",
      "__vModel__": "field111"
    },
    {
   
      "__config__": {
   
        "label": "计数器",
        "showLabel": true,
        "changeTag": true,
        "labelWidth": null,
        "tag": "el-input-number",
        "tagIcon": "number",
        "span": 24,
        "layout": "colFormItem",
        "required": true,
        "regList": [],
        "document": "https://element.eleme.cn/#/zh-CN/component/input-number",
        "formId": 105,
        "typeNumber": 2,
        "renderKey": 1649927477883
      },
      "placeholder": "计数器",
      "step": 1,
      "step-strictly": false,
      "controls-position": "",
      "disabled": false,
      "__vModel__": "field105"
    },
    {
   
      "__config__": {
   
        "label": "下拉选择",
        "showLabel": true,
        "labelWidth": null,
        "tag": "el-select",
        "tagIcon": "select",
        "layout": "colFormItem",
        "span": 24,
        "required": true,
        "regList": [],
        "changeTag": true,
        "document": "https://element.eleme.cn/#/zh-CN/component/select",
        "formId": 106,
        "typeNumber": 6,
        "renderKey": 1649927484505
      },
      "__slot__": {
   
        "options": [
          {
   
            "label": "选项一",
            "value": 1
          },
          {
   
            "label": "选项二",
            "value": 2
          }
        ]
      },
      "placeholder": "请选择下拉选择",
      "style": {
   
        "width": "100%"
      },
      "clearable": true,
      "disabled": false,
      "filterable": false,
      "multiple": false,
      "__vModel__": "field106"
    },
    {
   
      "__config__": {
   
        "label": "单选框组",
        "labelWidth": null,
        "showLabel": true,
        "tag": "el-radio-group",
        "tagIcon": "radio",
        "changeTag": true,
        "layout": "colFormItem",
        "span": 24,
        "optionType": "default",
        "regList": [],
        "required": true,
        "border": false,
        "document": "https://element.eleme.cn/#/zh-CN/component/radio",
        "formId": 107,
        "typeNumber": 4,
        "renderKey": 1649927491036
      },
      "__slot__": {
   
        "options": [
          {
   
            "label": "选项一",
            "value": 1
          },
          {
   
            "label": "选项二",
            "value": 2
          }
        ]
      },
      "style": {
   },
      "size": "medium",
      "disabled": false,
      "__vModel__": "field107"
    },
    {
   
      "__config__": {
   
        "label": "多选框组",
        "tag": "el-checkbox-group",
        "tagIcon": "checkbox",
        "defaultValue": [],
        "span": 24,
        "showLabel": true,
        "labelWidth": null,
        "layout": "colFormItem",
        "optionType": "default",
        "required": true,
        "regList": [],
        "changeTag": true,
        "border": false,
        "document": "https://element.eleme.cn/#/zh-CN/component/checkbox",
        "formId": 108,
        "typeNumber": 5,
        "renderKey": 1649927491380
      },
      "__slot__": {
   
        "options": [
          {
   
            "label": "选项一",
            "value": 1
          },
          {
   
            "label": "选项二",
            "value": 2
          }
        ]
      },
      "style": {
   },
      "size": "medium",
      "disabled": false,
      "__vModel__": "field108"
    },
    {
   
      "__config__": {
   
        "label": "日期选择",
        "tag": "el-date-picker",
        "tagIcon": "date",
        "defaultValue": null,
        "showLabel": true,
        "labelWidth": null,
        "span": 24,
        "layout": "colFormItem",
        "required": true,
        "regList": [],
        "changeTag": true,
        "document": "https://element.eleme.cn/#/zh-CN/component/date-picker",
        "formId": 110,
        "typeNumber": 3,
        "renderKey": 1649927506700
      },
      "placeholder": "请选择日期选择",
      "type": "date",
      "style": {
   
        "width": "100%"
      },
      "disabled": false,
      "clearable": true,
      "format": "yyyy-MM-dd",
      "value-format": "yyyy-MM-dd",
      "readonly": false,
      "__vModel__": "field110"
    }
  ]

最低0.47元/天解锁文章