adminPage-vue3依赖FormPage说明文档，表单页快速开发，使用思路及范例——汇总文档

已于 2024-07-25 12:10:17 修改
阅读量1k 收藏 13
点赞数 15
分类专栏： adminpage-vue3 开源 文章标签： vue.js 前端 javascript 开源 npm
于 2024-07-16 13:33:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44599143/article/details/140464041
版权

文章目录

引入

# 选择一个你喜欢的包管理器

# NPM
$ npm install  adminpage-vue3 --save

# Yarn
$ yarn add  adminpage-vue3

# pnpm
$ pnpm install  adminpage-vue3

import { FormPage } from 'adminpage-vue3'

思路介绍

本组件是基于element-UI进行快速搭建表单页的依赖，为前端静态逻辑处理，方便基础表单的渲染，将栅格属性，基础校验交由组件内部进行实现

最简示例

<template>
   <FormPage v-model="formData" :formConfig="config" />
</template>

<script setup>
import { FormPage } from 'adminpage-vue3'
import { ref } from 'vue'
const formData = ref({})
const config= [
  {
    label: '选择',
    key: 'select',
    type: 'select',
    childConfig: {
      type: 'option',
      keys: {
        value: 'key',
        label: 'label'
      },
      bind: {},
      list: [
        {
          label: '选项1',
          key: 'checkbox1',
        },
        {
          label: '选项2',
          key: 'checkbox2',
        }
      ]
    }
  },
  {
    label: '输入',
    key: 'input',
    defaultValue: '1',
    notNull: true
  },
  {
    label: '整数',
    key: 'isInt',
    isInt: true
  },
  {
    label: '数值',
    key: 'isNumber',
    isNumber: true
  },
  {
    label: '小数部分长度5',
    key: 'isNumber5',
    isNumber: 5
  },
  {
    label: '小数部分长度5可负数',
    key: 'isMinusNumber',
    isMinusNumber: 5
  },
  {
    label: '数字输入',
    key: 'inputNumber',
    notNull: true,
    type: 'inputNumber',
    bind: {
      step: 1,
      min: 0
    }
  }
]
</script>

在这里插入图片描述

FormPage API汇总

属性

属性名说明类型默认值开始版本
v-model双向绑定，表单数据Object{}1.0.0
formConfig表单项配置，详见formConfig-typeArray[]1.0.0
span表单栅格占据的列数（24栅格布局）[Number, String]241.0.0
validateHandle外部校验函数,返回String时，该String将作为异常抛出，返回Array<String>时，每个String都作为单独异常进行抛出Function() => ‘’1.0.0
showText非表单模式，仅显示内容，不渲染表单输入Boolean-1.0.0

插槽

插槽名说明开始版本
[你设定的slotName]本组件内部使用了大量的动态组件，方便配置，可阅读文档自行设置插槽名1.0.0

Exposes

值名说明开始版本
validate()执行表单校验1.0.0
setInitParams()初始化表单绑定值1.0.3

自定义对象

formConfig(array<object> 类型)

属性名说明类型默认值开始版本
key字段key值，该值将作用于表单modelValue的key值，当type为times时详见当type=times时String-1.0.0
type详见下文 formConfig-typeString/vue3Component‘input’1.0.0
label表单标签文本String-1.0.0
noLabel搜索表单无标签文本标识，为true时将不显示标签文本Booleanfalse1.0.0
bind表单搜索项属性绑定，将直接作用于表单筛选框的绑定，当type为times时详见当type=times时Object默认值可详见当type不为时间类型时 bind默认值 与 当type为时间类型时 bind默认值1.0.0
defaultValue默认参数，当type为times时详见当type=times时String-1.0.0
slotName插槽名称 将整个搜索项暴露给父页面进行使用String-1.0.0
childSlot子插槽名，当组件结构为<el-select><el-option><\el-option></el-select>时，可将type设置为 select，通过子插槽渲染optionString-1.0.0
childConfig子组件配置对象Object1.0.0
notNull必填项声明，填写时将对该项是否填写进行校验Boolean-1.0.0
isInt整数填写声明，填写时将对该项是否为整数进行校验Boolean-1.0.0
isNumber数值【仅正数】填写声明（小数），填写时将对该项是否为数值进行校验，当接受参数为数字时，该数字将被作为小数位数参与校验，当为true时，小数位数长度不限制[Boolean,Number]-1.0.0
isMinusNumber数值【可负数】填写声明（小数），填写时将对该项是否为数值进行校验，当接受参数为数字时，该数字将被作为小数位数参与校验，当为true时，小数位数长度不限制[Boolean,Number]-1.0.0
childConfig（object类型）
属性名说明类型默认值
typeelement相关组件标签文本（以<el-time-picker>为例：‘el-time-picker’|‘time-picker’|‘ElTimePicker’|‘TimePicker’均可）将捕获element-UI相关组件，并通过v-model将值与页面搜索项进行绑定String
list数据遍历对象array-
keys数据遍历对象中需要绑定到每个子组件的数据，key值将绑定到子组件上，value值将每个list的数据绑定到子组件对应的key上Object{label:‘label’,value:‘value’}
bind子组件属性绑定，将直接作用于子组件的绑定Object默认值可详见当type不为时间类型时 bind默认值
formConfig-type

值 / 值类型值详情说明开始版本
‘times’固定文本times将渲染分开为两个的时间筛选器，key、bind、defaultValue详见当type=times时1.0.0
‘slot’固定文本slot该搜索项将索引页面插槽进行渲染（寻找slotName命名插槽）1.0.0
Stringelement相关组件标签文本（以<el-time-picker>为例：‘el-time-picker’|‘time-picker’|‘ElTimePicker’|‘TimePicker’均可）将捕获element-UI相关组件，并通过v-model将值与页面搜索项进行绑定1.0.0
类型为 VueComponentvue3组件对象将该组件进行绑定并通过v-model绑定值，逻辑与主要处理的element-ui的相关标签保持一致1.0.0
当type=times时

属性名说明类型默认值开始版本
startDefaultValue开始时间默认参数String-1.0.0
endDefaultValue结束时间默认参数String-1.0.0
startBind开始时间属性绑定Object详见 当type为时间类型时 bind默认值1.0.0
endBind结束时间属性绑定Object详见 当type为时间类型时 bind默认值1.0.0
startKey开始时间绑定KeyObjectstartTime1.0.0
endKey结束时间绑定KeyObjectendTime1.0.0
当type不为时间类型时的 bind默认值（Object类型）

属性名默认值开始版本
placeholderlabel的值1.0.0
clearabletrue1.0.0
stylewidth: 200px1.0.0
当type为时间类型时的 bind默认值（Object类型）

属性名默认值开始版本
stylewidth: 190px1.0.0
typedatetime1.0.0
placeholder请选择时间1.0.0
formatYYYY-MM-DD HH:mm:ss1.0.0
valueFormatYYYY-MM-DD HH:mm:ss1.0.0

Exposes

validate

本方法为校验函数，返回当前表单校验结果
校验通过时返回true
校验失败返回false
返回结果为Promise 请注意处理

<template>
  <div>
    <div style="padding: 10px">
      <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
      <el-button type="primary" @click="validateDate">校验</el-button>
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
const formData = ref({})
const FormPageRef = ref(null)
async function validateDate() {
  const isOk = await FormPageRef.value.validate()
  console.log('isOk', isOk)
}
const config = [
  {
    label: '输入',
    key: 'input',
    isMinusNumber: 1,
  },
]
</script>
<style lang="scss" scoped></style>

属性: 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,

  //校验配置项
  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>

在这里插入图片描述

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

childConfig

配置代码：

const searchConfig = [
  {
    label: '类型',
    key: 'type',
    type: 'select',
    bind: {
      filterable: true
    },
    childConfig: {
      type: 'el-option',
      list: [{
	      deptName:'类型1',
	      deptId:'1'
      },{
	      deptName:'类型2',
	      deptId:'2'
      },{
	      deptName:'类型3',
	      deptId:'3'
      }],
      keys: {
        label: 'deptName',
        value: 'deptId'
      },
      bind:{
	      style:{
		      width:'100%'
	      }
      }
    }
  }
]
/**
每个搜索项默认绑定如下结构
  const defBindData = {
    placeholder: configItem.label || '',
    clearable: true,
    style: 'width: 200px'
  }
*/

渲染结构

 <el-select
      v-model="form.type"
      filterable="true"
      clearable="true"
      placeholder="类型"
      style="width: 200px"
    >
      <el-option
        v-for="item in options"
        :label="item['deptName']"
        :value="item['deptId']"
	     style="width: 100%"
      />
      <!-- item['deptName']=>item[keys.label] -->
      <!-- item['deptId']=>item[keys.value] -->
    </el-select>
    options = [{
	      deptName:'类型1',
	      deptId:'1'
      },{
	      deptName:'类型2',
	      deptId:'2'
      },{
	      deptName:'类型3',
	      deptId:'3'
      }]

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>

在这里插入图片描述

notNull 必填校验

notNull接收布尔值，当·notNull·为true且该项未输入时，将抛出异常

<template>
  <div>
    <div style="padding: 10px">
      <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
      <el-button type="primary" @click="validateDate">校验</el-button>
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
  FormPageRef.value.validate()
}
const config = [
  {
    label: '输入',
    key: 'input',
    notNull: true,
  },
]
</script>
<style lang="scss" scoped></style>

在这里插入图片描述

isInt整数校验（不可负数）

isInt接收布尔值，当isInt为true且该项输入非正整数，将抛出异常

注意:该参数不作为必填项校验，若必填校验请单独声明notNull

<template>
  <div>
    <div style="padding: 10px">
      <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
      <el-button type="primary" @click="validateDate">校验</el-button>
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
  FormPageRef.value.validate()
}
const config = [
  {
    label: '输入',
    key: 'input',
    isInt: true,
  },
]
</script>
<style lang="scss" scoped></style>

在这里插入图片描述

isNumber 数值校验（可小数）（不可负数）

isNumber 接收布尔值或正整数，当·isNumber ·为true或Number 且该项输入非数值，将抛出异常

注意:该参数不作为必填项校验，若必填校验请单独声明notNull

不限制长度

isNumber 接收布尔值时，当isNumber 为true且该项输入非数值，将抛出异常

<template>
  <div>
    <div style="padding: 10px">
      <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
      <el-button type="primary" @click="validateDate">校验</el-button>
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
  FormPageRef.value.validate()
}
const config = [
  {
    label: '输入',
    key: 'input',
    isNumber: true,
  },
]
</script>
<style lang="scss" scoped></style>

在这里插入图片描述

限制长度

isNumber 接收正整数时，将限制用户输入小数长度，将抛出异常
注意:此长度仅限制小数部分，整数长度不包含在内

<template>
  <div>
    <div style="padding: 10px">
      <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
      <el-button type="primary" @click="validateDate">校验</el-button>
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
  FormPageRef.value.validate()
}
const config = [
  {
    label: '输入',
    key: 'input',
    isNumber: 1,
  },
]
</script>
<style lang="scss" scoped></style>

在这里插入图片描述

isMinusNumber 数值校验（可小数）（可负数）

isMinusNumber 接收布尔值或正整数，当·isMinusNumber ·为true或Number 且该项输入非数值，将抛出异常

注意:该参数不作为必填项校验，若必填校验请单独声明notNull

不限制长度

isMinusNumber 接收布尔值时，当isMinusNumber 为true且该项输入非数值，将抛出异常

<template>
  <div>
    <div style="padding: 10px">
      <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
      <el-button type="primary" @click="validateDate">校验</el-button>
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
  FormPageRef.value.validate()
}
const config = [
  {
    label: '输入',
    key: 'input',
    isMinusNumber: true,
  },
]
</script>
<style lang="scss" scoped></style>

在这里插入图片描述

限制长度

isMinusNumber 接收正整数时，将限制用户输入小数长度，将抛出异常
注意:此长度仅限制小数部分，整数长度不包含在内

<template>
  <div>
    <div style="padding: 10px">
      <FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
      <el-button type="primary" @click="validateDate">校验</el-button>
    </div>
  </div>
</template>
<script setup>
import { FormPage } from 'adminpage-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
  FormPageRef.value.validate()
}
const config = [
  {
    label: '输入',
    key: 'input',
    isMinusNumber: 1,
  },
]
</script>
<style lang="scss" scoped></style>

在这里插入图片描述

_默_
关注
专栏目录
Vue项目实战——【基于 Vue3.x + NodeJS】实现的课程表排课系统二（week-title）
weixin_45732235的博客
11-12 808
头部部分 课程表排课系统
vue3 依赖-组件formpage-vue3说明文档，表单页快速开发，使用思路及范例（Ⅰ）配置项文档
最新发布
默的博客
05-28 920
本组件是基于element-UI进行快速搭建表单页的依赖，为前端静态逻辑处理，方便基础表单的渲染，将栅格属性，基础校验交由组件内部进行实现
vue实现课程表，可切换周显示范围，纯原生实现
zuowentao666的博客
07-31 1175
直接上图下拉即用，记得点赞
Vue3专栏项目 -- 二、自定义Form组件（上）
m0_64931189的博客
05-09 1200
说到表单我们就不得不提到验证，我们需要过滤掉一系列方法的输入，最早的时候这个功能一般是在服务器端完成，假如有错误服务器会返回并且渲染一些错误，这样做费时费力，所以说在现在的web应用中，表单一般会在前端进行验证，它会适时的展示用户的问题，当没问题时就发送请求，然后后端再验证一次，我们现在还没有接入后端，所以不需要考虑点击提交以后和后端的交互功能，而是只有一个关注点，那就是表单验证。所谓表单验证是表单世界里前端最重要的一个功能，将表单验证的功能封装好也算是一个难点，接下来我们来一步步完成这个任务。
【通用表格组件】vue3 + element-ui + template 实现通用表格组件
qq_39404437的博客
10-28 7247
【通用表格组件】vue3 + element-ui + template 实现通用表格组件
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
使用 Vue-Sku-Form 时，首先需要通过 npm 或 yarn 安装，然后在 Vue 项目中导入并注册组件，最后在模板中使用，即可快速创建出符合业务需求的 SKU 表单。 总结来说，Vue-Sku-Form 是一个强大的电商 SKU 表单解决...
vue-form-generator：Vue.js的基于模式的表单生成器组件
02-06
vue-form-generator在内部使用和 。 尽管内置字段不需要外部依赖关系，但可选字段可能需要其他库。 这些依赖关系分为两个阵营：jQuery或Vanilla。 您可以在两种风格中找到几乎相同的功能。 最后，您可以选择是否...
vue-form-maker:Vue 表单生成器——动态生成表单组件
05-02
Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker ...
ruoyi-vue-pro开发指南PDF下载
03-07
ruoyi-vue-pro开发指南PDF下载 包含各种组件开发指南
vue+ant-design+formBuiler表单构建器-技能提升-form design-亲测有效
05-08
vue+ant-design+formBuiler表单构建器——技能提升——form design——亲测有效 vue+ant-design+formBuiler表单构建器 form design 亲测有效 表单构建器 formBuilder插件的使用 vue:表单构建器 自定义拖拽表单 实现...
Vue.js表单操作
qq_36772604的博客
06-25 3054
今天学习了一下Vue 的表单操作，现在就来记录一下学到了那些东西吧。主要就是对表单各种组件的控制。例如Input，textarea，select等...用完之后发现果然是方便了不少，之前纯js操作十几行代码才能解决的现在一两行就完事儿。好了，废话不多说，直接开始。主要用到的就是vue的V-model，这个v-mode呢形象点说就像是一个跟屁虫，你干嘛它就干嘛(组件干嘛它就干嘛)，也就是双向绑定。首...
vue 实现课程表
xiaofang_z的博客
04-27 4219
要实现的效果如下： 主要是花了很长时间去花了这个页面，也是各种百度，所以，在此记录下，有需要的人可以借鉴看下 包含了html,假数据、以及css,可以整个copy过去 目前这一版是未联调的静态页面，下一次发一个已经联调过的，含接口的数据，看真实效果 <template> <div> <div class="Micro_top"> <div class="searchs"> <span>时间 :&
使用vue3绘成一个简单的课程表
weixin_45145454的博客
01-10 2083
简单的用模拟数据写一个课表，
前端vue开发之----vue组件详解(一)
不二青春
05-12 572
实际应用项目：http://github.crmeb.net/u/long 主要内容: 1. 组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 父子组件的通信 组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树： 例如上面页面, 页面整体分为三个部分. 我们可以将每一个部分设计为一个组件. 然后将...
技术文档（3）前端开发—vue项目—规范文档
热门推荐
dugujiuding的博客
03-31 1万+
前端开发—vue项目—规范文档
【庖丁解牛】vue-element-admin前端CRUD通用操作组件详解，对，核心就是crud.js文件
追寻上飞的博客
10-12 8569
框架之所以能够快速定制应用，得益于其通配的CRUD操作，属性配置多样化且个性化，能够满足绝大部分开发需求，也方便了代码生成。钩子函数与vue生命周期的执行顺序应该是我们最关注的，因为事件的起始影响着编程的思路。行代码，以及下图中其它四个vue组件，形成了对通用CRUD操作的高级封装。离不开assign，vm.$option，callVm。钩子函数应该说是做的很精细，包含各个用户操作的事件。函数，封装了配置项、方法、钩子函数。在该文件之前有一个老版本的文件，在。共计9个函数，最重要的就是。
使用VuePress搭建自己的前端组件库文档
宁静致远
09-23 3650
使用VuePress搭建自己的前端组件库文档
Vue项目实战——【基于 Vue3.x + NodeJS】实现的课程表排课系统（搭建开发环境）
weixin_45732235的博客
11-02 1940
课程表排课系统
Vue3+ts 使用node基于fs模块在视图上对系统文件、目录进行读写、进入下一级返回上一级的操作。
m0_62758542的博客
09-06 4732
vue3+ts 使用node基于fs模块在视图上对系统文件、目录进行读写、进入下一级返回上一级的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_默_

别打赏了，点点赞，点点关注就行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值