Dynamic form for Vue3
npm install dynamicformdjx基于 Vue 3 的动态表单及录入。
> 新增综合CRUD模板
DynamicForm 一个灵活且动态的表单组件,使用数组,简化模版操作,提供多种hook快速操作表单等。
- 简化template代码,快速处理表单
- 提供render2函数渲染表单项,使用函数渲染值或自定义h函数
- 提供多种hooks函数,快速处理数据值
DynamicInput 组件是一个灵活且动态的表单输入组件,允许用户添加、修改和删除键值对。它提供了多种自定义选项,如按钮文本、表单布局和输入过滤
- 支持通过 v-model 双向绑定任意对象,(包含受控和非受控) 可动态增删字段
- 支持将值解析为:字符串 / 数字 / 数组(字符串数组、数字数组)
- 文案、样式、数组分隔符等均可配置
---
``bash`任意一种
npm install dynamicformdjxor
yarn add dynamicformdjxor
pnpm add dynamicformdjx
> (依赖于naive ui或element plus组件库,请配合一起使用)
#### 与Naive ui配合
`vue
title="zeal test" @onReset="doReset"
@onSearch="doSearch"/>
Tool...
:loading="tableLoading"
:columns="columns"
:data="tableData"
:bordered="false"
:style="{ height: tableHeight+'px'}"
:flex-height="true"
:scroll-x="600"
@update:checked-row-keys="handleSelectionChange"
/>
Total {{ itemCount }}
`
#### 与Element-plus配合
`vue
no data
title="zeal test" @onReset="doReset"
@onSearch="doSearch">
Tool...
`
#### 与Naive ui配合
##### 简单表单
> 还有自定义表单,装饰表单请参考文档
`vue
与Naive ui结合简单表单
`
#### 与Element-plus配合
> (只是导入从"dynamicformdjx/elementPlus"中,类型方法与上方naive ui一致)
##### 简单表单
`vue
与Element plus结合简单表单
`
> 此录入无需组件库依赖
#### 1.单组件
`vue
Input Result
{{ test }}
`
#### 2.级联基本使用
`vue
Cascade dynamicInput Result
{{ test2 }}
``