adminPage-vue3依赖FormPage说明文档，表单页快速开发，使用思路及范例（Ⅱ）formConfig基础配置项

adminPage-vue3依赖FormPage说明文档，表单页快速开发，使用思路及范例（Ⅱ）formConfig配置项

  • 属性: formConfig（表单项设置）
    • key
    • label
    • noLabel
    • defaultValue
    • bind
    • childSlot
    • type
      • String类型数据（除 times 与 slot ）
      • 字符串 times
        • 绑定Key
        • 默认值
        • 绑定属性
        • 绑定Key
      • 字符串 slot （及 配套 slotName 属性）
      • vue组件类型 VueComponent

属性: formConfig（表单项设置）

搜索项设置接收数组类型，每项设置均为对象，结构为

{
  key:String,
  label:String,
  type:String || VueComponent || 'times' || 'slot', // type:'input' || type:ElInput || type:'times' || type:'slot'
  noLabel:Boolean,
  defaultValue:Any,
  bind:Object,
  childSlot:String,

  // type='times'
  startDefaultValue:String,
  endDefaultValue:String,
  startBind:Object,
  endBind:Object,
  startKey:String,
  endKey:String,
    
  // type='slot'
  slotName:String,

  //以下配置请查阅formConfig校验配置项
  notNull:Boolean,
  isInt:Boolean,
  isNumber:Boolean || Number,
  isMinusNumber:Boolean || Number,
}

key

本字段将设置为搜索时的属性key字段，当type=times 时，将设置为startKey与endKey(默认为startTime与endTime)
请添加图片描述

label

将作为表单label进行渲染

在这里插入图片描述

noLabel

声明本字段，将取消显示该项的label

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: '输入',
    key: 'input',
  },
  {
    label: '输入',
    key: 'input',
    noLabel: true,
  },
]
</script>

在这里插入图片描述

defaultValue

声明本字段默认值，首次加载时，初始渲染时均将该项设为该值

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
    {{ formData }}
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: '输入',
    key: 'input',
    defaultValue: 1,
  },
  {
    label: '输入',
    key: 'input2',
    defaultValue: 2,
  },
]
</script>

在这里插入图片描述

bind

本属性将直接作用于表单项渲染绑定，例如

{
    label: '电话',
    type:'input',
    key: 'phone',
    bind:{
    	type:'textarea',
    	placeholder:'占位文本',
    	style:'color:red',
    	class:'testClass'
	}
}

将渲染为·<el-input v-model="phone" type="textarea" placeholder="占位文本" style="color:red" class="testClass" />

示例代码如下

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
    {{ formData }}
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: '电话',
    type: 'input',
    key: 'phone',
    bind: {
      type: 'textarea',
      placeholder: '占位文本',
      style: 'color:red',
      class: 'testClass',
    },
  },
]
</script>

在这里插入图片描述

非时间类型的bind默认属性为：

{
    placeholder: label || '',
    clearable: true,
    style: 'width: 200px'
  }

时间类型的默认属性为：

{
  style: 'width: 190px',
  type: 'datetime',
  placeholder: '请选择时间',
  format: 'YYYY-MM-DD HH:mm:ss',
  valueFormat: 'YYYY-MM-DD HH:mm:ss'
}

childSlot

本属性为插槽名称，动态插槽渲染。
主要用于elementUI中el-select、el-checkbox-group、el-radio-group等此类组件中需要声明子组件的情形，例如el-select内部需要配置el-option，本示例也将以el-select为例

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config">
      <template #selectChildSlot>
        <el-option label="2024-01-01" value="2024-01-01" />
        <el-option label="2023-01-01" value="2023-01-01" />
        <el-option label="2022-01-01" value="2022-01-01" />
        <el-option label="2021-01-01" value="2021-01-01" />
      </template>
    </FormPage>
    <div style="margin-left: 200px">
      {{ formData }}
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: '时间',
    key: 'selectDate',
    type: 'select',
    childSlot: 'selectChildSlot',
  },
]
</script>

在这里插入图片描述

匹配字段设置如下
在这里插入图片描述

type

本属性是搜索项主要配置项，默认值为ElInput
用于各搜索项配置类型及特殊处理声明

String类型数据（除 times 与 slot ）

String 类型传入type是较为常用的情景，主要是将element-UI组件标签文本传入type内，交由type进行渲染交互，对于element-UI标签可传入驼峰式或-分割，下文将使用el-input-number标签进行演示，因el-input-number标签文本结构较为复杂，能够清晰表达出作者对于type接收值的处理
注意：times与slot被排除在外，当文本类型无法捕获element-UI时，将使用默认的ElInput，没有传type时也将使用ElInput

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config"/>
    <div style="margin-left: 200px">
      {{ formData }}
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: 'test1',
    key: 'test1',
    type: 'el-input-number',
  },
  {
    label: 'test2',
    key: 'test2',
    type: 'el-inputNumber',
  },
  {
    label: 'test3',
    key: 'test3',
    type: 'input-number',
  },
  {
    label: 'test4',
    key: 'test4',
    type: 'El-Input-Number',
  },
  {
    label: 'test5',
    key: 'test5',
    type: 'inputNumber',
  },
  {
    label: 'test6',
    key: 'test6',
    type: 'elInputNumber',
  },
  {
    label: 'test7',
    key: 'test7',
    type: 'ElInputNumber',
  },
  {
    label: 'test8',
    key: 'test8',
    type: 'InputNumber',
  },
]
</script>

在这里插入图片描述

字符串 times

当 type = ‘times’ 将会分别展示开始时间与结束时间，字段将强制设为startTime与endTime
如：{ label: '时间', type: 'times'}就将渲染为请添加图片描述
接口中也将携带为请添加图片描述

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config"/>
    <div style="margin-left: 200px">
      {{ formData }}
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: '时间',
    type: 'times',
  },
]
</script>

在这里插入图片描述

绑定Key

默认值分别为startKey与endKey

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config"/>
    <div style="margin-left: 200px">
      {{ formData }}
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: '时间',
    type: 'times',
    startKey: 'startKey',
    endKey: 'endKey',
  },
]
</script>

在这里插入图片描述

默认值

默认值分别为startDefaultValue与endDefaultValue

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config"/>
    </FormPage>
    <div style="margin-left: 200px">
      {{ formData }}
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: '时间',
    type: 'times',
    startDefaultValue: '2024-01-01 00:00:00',
    endDefaultValue: '2024-12-31 23:59:59',
  },
]
</script>

在这里插入图片描述

绑定属性

默认值分别为startBind与endBind

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config"/>
    <div style="margin-left: 200px">
      {{ formData }}
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: '时间',
    type: 'times',
    startBind: {
      type: 'date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD 00:00:00',
      style: {
        width: '150px',
      },
    },
    endBind: {
      type: 'date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD 23:59:59',
      style: {
        width: '350px',
      },
    },
  },
]
</script>

在这里插入图片描述

绑定Key

字符串 slot （及 配套 slotName 属性）

当 type =‘slot’ 时，意味着你将要对该搜索项手动处理，组件将根据你设置的slotName进行暴露插槽，便于业务处理

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config">
      <template #slotModules> 插槽开发 </template>
    </FormPage>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config = [
  {
    label: 'slot测试',
    key: 'slotData',
    defaultValue: 'ok',
    type: 'slot',
    slotName: 'slotModules',
  },
  {
    label: 'test',
  },
]
</script>

在这里插入图片描述

匹配流程如下
在这里插入图片描述

注：可以传入整个组件给type，并通过v-model进行绑定，而无需通过插槽使用自定义组件详见 type-vue组件类型 VueComponent

vue组件类型 VueComponent

最后，type 也可以接收vue3 的相关组件，并仍可使用bind字段进行属性绑定，传入组件建议可通过v-model进行双向绑定，因内部实现方法为modelValue与onUpdate:modelValue进行的v-mode绑定，

既：自开发组件

  • 满足<componentName v-model="data">时，即可满足其条件

为方便，作者复用elementUI的ElInput组件作为传入组件

<template>
  <div style="padding: 50px">
    <FormPage ref="FormPageRef" v-model="formData" :formConfig="config">
      <template #slotModules> 插槽开发 </template>
    </FormPage>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
import { ElInput } from 'element-plus' //可以用你写的组件

const formData = ref({})
const config = [
  {
    label: '自定义组件',
    key: 'DIY',
    type: ElInput,
    bind: {
      type: 'textarea',
    },
  },
]
</script>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/793032.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

接口测试框架基于模板自动生成测试用例！

接口测试框架基于模板自动生成测试用例！

引言 在接口自动化测试中&#xff0c;生成高质量、易维护的测试用例是一个重要挑战。基于模板自动生成测试用例&#xff0c;可以有效减少手工编写测试用例的工作量&#xff0c;提高测试的效率和准确性。 自动生成测试用例的原理 为了实现测试用例数据和测试用例代码的解耦&a…
阅读更多...
Linux内存管理--系列文章柒——硬件架构

Linux内存管理--系列文章柒——硬件架构

一、引子 之前文章讲解的是系统的虚拟内存&#xff0c;本章讲述这些硬件的架构和系统怎样统一管理这些硬件的。 二、物理内存模型 物理内存模型描述了计算机系统中的物理内存如何由操作系统组织和管理。它定义了物理内存如何划分为单元&#xff0c;如何寻址这些单元以及如何…
阅读更多...
数电设计提问求帮助，出租车计费器。

数电设计提问求帮助，出租车计费器。

&#x1f3c6;本文收录于《CSDN问答解惑-》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…
阅读更多...
Unity自定义场景背景图片

Unity自定义场景背景图片

Unity自定义场景背景图片 1.更改图片材质 2.新建空对象并进行组件的添加、图层的设置 3.隐藏图层 4.对原有摄像机进行设置 5.新建摄像机&#xff0c;并进行设置 6.对步骤2新建的空物体大小进行设置&#xff0c;直至铺满整个屏幕
阅读更多...
..质数..

..质数..

先弄清楚我们在上小学时 学的概念。 1、什么是质因数&#xff1f; -质因数是指能够整除给定正整数的质数。每个正整数都可以被表示为几个质数的乘积&#xff0c;这些质数就是该数的质因数。质因数分解是将一个正整数分解成若干个质数相乘的过程。例如&#xff0c;数字 12…
阅读更多...
Vue 3 与 TypeScript：最佳实践详解

Vue 3 与 TypeScript：最佳实践详解

大家好，我是CodeQi！ 很多人问我为什么要用TypeScript？ 因为 Vue3 喜欢它！ 开个玩笑... 在我们开始探索 Vue 3 和 TypeScript 最佳实践之前，让我们先打个比方。 如果你曾经尝试过在没有 GPS 的情况下开车到一个陌生的地方，你可能会知道那种迷失方向的感觉。 而 Typ…
阅读更多...
oracle 23ai新的后台进程bgnn介绍

oracle 23ai新的后台进程bgnn介绍

前言 昨天发文研究了哪些oracle 后台不能杀 具体文章如下链接 oracle哪些后台进程不能杀&#xff1f;-CSDN博客 其中23ai中新增了一个后台进程bgnn 但是在oracle 23ai database reference中并没有找到该后台进程 有点不甘心就开了个SR&#xff0c;找oracle 官方来看看这个后…
阅读更多...
[Qt] Qt Creator中，新建QT文件时选择界面模版下的各选项

[Qt] Qt Creator中，新建QT文件时选择界面模版下的各选项

在Qt Creator中&#xff0c;新建文件时选择界面模版下的各选项具有特定的意义&#xff0c;这些选项主要帮助开发者根据项目需求快速生成不同类型的文件。以下是对这些选项的详细解释&#xff1a; 0. Qt Item Model 意义&#xff1a;列表模型是Qt中用于表示和操作数据的强大抽…
阅读更多...
Sqli-labs 3

Sqli-labs 3

1.按照路径http://localhost/sqli-labs/sqli-labs-master/Less-3/进入 2.判断注入类型----字符型 Payload&#xff1a;?id1’) and 11-- 注&#xff1a;根据报错提示的语法错误&#xff0c;在第一行中使用接近’union select 1,2,3--’)的正确语法 3.判断注入点&#xff1a;…
阅读更多...
scss概念及使用

scss概念及使用

目录 scss是什么 scss和css比较 scss的使用 声明变量 区分默认变量 区分全局变量和局部变量 嵌套语法 选择器嵌套 基本嵌套 嵌套中的父选择器引用&#xff08;&&#xff09; 嵌套的注意事项 嵌套的嵌套 属性嵌套 基本属性嵌套 嵌套的注意事项 继承 基本用…
阅读更多...
为什么使用代理IP无法访问网站

为什么使用代理IP无法访问网站

代理IP可以为用户在访问网站时提供更多的便利性和匿名性&#xff0c;但有时用户使用代理IP后可能会遇到无法访问目标网站的问题。这可能会导致用户无法完成所需的业务要求&#xff0c;给用户带来麻烦。使用代理IP时&#xff0c;您可能会因为各种原因而无法访问您的网站。以下是…
阅读更多...
AutoHotKey自动热键(八)脚本快速暂停与重新加载

AutoHotKey自动热键(八)脚本快速暂停与重新加载

我们在编辑脚本的时候,可以添加快捷键来改变脚本的状态 ;暂停脚本 F11::Suspend;重置脚本 F12::Reloadreload用来重置脚本 我们可以在脚本开头加上标签提示脚本重启成功 ToolTip, 脚本已经重启 Sleep, 1000 ToolTip第二个ToolTip是用来关闭提示器用的 这个提示功能一定要写…
阅读更多...
深入探索大语言模型

深入探索大语言模型

深入探索大语言模型 引言 大语言模型&#xff08;LLM&#xff09;是现代人工智能领域中最为重要的突破之一。这些模型在自然语言处理&#xff08;NLP&#xff09;任务中展示了惊人的能力&#xff0c;从文本生成到问答系统&#xff0c;无所不包。本文将从多个角度全面介绍大语…
阅读更多...
Dify 与 Xinference 最佳组合 GPU 环境部署全流程

Dify 与 Xinference 最佳组合 GPU 环境部署全流程

背景介绍 在前一篇文章 RAG 项目对比 之后&#xff0c;确定 Dify 目前最合适的 RAG 框架。本次就尝试在本地 GPU 设备上部署 Dify 服务。 Dify 是将模型的加载独立出去的&#xff0c;因此需要选择合适的模型加载框架。调研一番之后选择了 Xinference&#xff0c;理由如下&…
阅读更多...
Windows环境+C#实现显示接口测试

Windows环境+C#实现显示接口测试

代码如下&#xff1a; using Models; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.ComponentModel; using System.ComponentModel.Design; using System.Data; using System.Diagnostics; using System.Drawing; using System.IO; …
阅读更多...
短视频矩阵：批量发布的秘密揭秘

短视频矩阵：批量发布的秘密揭秘

在数字化时代&#xff0c;短视频已经成为一种广受欢迎的媒体形式。无论是用于品牌推广、产品营销还是个人创作&#xff0c;短视频都提供了一种直观、生动的方式来吸引观众的注意力。然而&#xff0c;有效地制作、管理和发布短视频对于许多创作者和企业来说是一个挑战。 为此&am…
阅读更多...
C++ 现代教程三

C++ 现代教程三

// 模板参数类型区分 template <class T> static std::string cppdemangle() {std::string s{cppdemangle(typeid(std::remove_cv_t<std::remove_reference_t<T>>))};if (std::is_const_v<std::remove_reference_t<T>>)s " const";if…
阅读更多...
Linux 入门教程 by 程序员鱼皮

Linux 入门教程 by 程序员鱼皮

本文作者&#xff1a;程序员鱼皮 免费编程学习 - 编程导航网&#xff1a;https://www.code-nav.cn 大家好&#xff0c;我是鱼皮。 前两天我学编程的老弟小阿巴过生日&#xff0c;我问他想要什么礼物。 本来以为他会要什么游戏机、Q 币卡、鼠标键盘啥的&#xff0c;结果小阿巴…
阅读更多...
【car】深入浅出学习机械燃油车知识、结构、原理、维修、保养、改装、编程

【car】深入浅出学习机械燃油车知识、结构、原理、维修、保养、改装、编程

汽车的五大总成通常是指发动机、变速器、前后桥、车架和悬挂系统。 发动机&#xff1a;是汽车的动力来源&#xff0c;负责将燃料的化学能转化为机械能&#xff0c;驱动汽车行驶。常见的发动机类型有内燃机&#xff08;如汽油发动机、柴油发动机&#xff09;和电动机&#xff0…
阅读更多...
网络安全应急响应信息收集利器-Eagle_Eye

网络安全应急响应信息收集利器-Eagle_Eye

项目介绍: 网络安全应急响应信息收集利器 - Eagle_Eye&#xff1a;您的终端信息自动收集专家 在网络安全的紧急时刻&#xff0c;每一秒都至关重要。Eagle_Eye&#xff0c;这款专为应急响应设计的工具&#xff0c;如同一位随时待命的侦察兵&#xff0c;能够在危机时刻迅速收集…
阅读更多...
最新文章

Copyright @ 2022~2023