基于 element-plus 封装一个依赖 json 动态渲染的查询控件，查询条件自动生成，告别手动编码

2023-11-25 10:48:58

在实际的工作项目中，我们经常会遇到这样一个场景：我们需要在管理后台开发一个查询页面，用户可以输入各种条件来查询数据。传统的做法是手动编写代码来生成查询条件，这不仅费时费力，而且容易出错。

为了解决这个问题，我们开发了一个基于 element-plus 封装的依赖 json 动态渲染的查询控件。该控件可以根据 json 配置自动生成查询条件，告别手动编码，大大提高开发效率。

该控件的使用非常简单，只需要将 json 配置传递给控件，控件就会自动生成相应的查询条件。例如，以下是一个简单的 json 配置：

[
  {
    "label": "名称",
    "key": "name",
    "type": "input"
  },
  {
    "label": "年龄",
    "key": "age",
    "type": "number"
  },
  {
    "label": "性别",
    "key": "gender",
    "type": "select",
    "options": [
      {
        "label": "男",
        "value": "male"
      },
      {
        "label": "女",
        "value": "female"
      }
    ]
  }
]

将上記の配置传递给控件，控件就会自动生成一个查询表单，如下图所示：

[图片]

用户可以在表单中输入查询条件，然后点击“查询”按钮来查询数据。

该控件不仅可以生成简单的查询条件，还可以生成复杂的分组查询条件。例如，以下是一个分组查询条件的 json 配置：

[
  {
    "label": "名称",
    "key": "name",
    "type": "input"
  },
  {
    "label": "年龄",
    "key": "age",
    "type": "number"
  },
  {
    "label": "性别",
    "key": "gender",
    "type": "select",
    "options": [
      {
        "label": "男",
        "value": "male"
      },
      {
        "label": "女",
        "value": "female"
      }
    ]
  },
  {
    "label": "分组条件",
    "key": "group_by",
    "type": "select",
    "options": [
      {
        "label": "名称",
        "value": "name"
      },
      {
        "label": "年龄",
        "value": "age"
      },
      {
        "label": "性别",
        "value": "gender"
      }
    ]
  }
]