This action will force synchronization from jjxliu306/ng-form-elementplus, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
NG-FORM-ELEMENTPLUS
说明
目前已经开始启用2.0版本,配置基本兼容1.x版本。差异部分如下:
在线示例 https://jjxliu306.github.io/ng-form-elementplus/dist
element-ui版本地址 https://gitee.com/jjxliu306/ng-form-element
iview版本地址 https://gitee.com/jjxliu306/ng-form-iview
ngtool 后端解析和校验功能 https://gitee.com/jjxliu306/ngtool
https://www.kancloud.cn/jjxliu306/ng-form/3138508
##示例
基础表单
表单验证和组件动态显示
动态表格
基于vue和element-plus实现的表单设计器。通过拖拽方式快速生成一个表单页面,表单可以导出json格式,也可以将其他人绘制的表单通过json导入方式进行还原。
npm install --save ng-form-elementplus
// 导入组件库
import NgFormElementPlus from 'ng-form-elementplus'
import 'ng-form-elementplus/lib/style.css'
const app = createApp(App)
// 注册组件库
app.use(NgFormElementPlus)
<div id="app">
<ng-form-design />
</div>
方法:
方法名称 | 参数 | 说明 |
---|---|---|
initModel | json | 初始化动态表单内容,参数为动态表单json模板 |
getModel | N/A | 返回当前正在编辑得动态表单信息 |
属性:
属性名 | 说明 | 格式 | 默认值 |
---|---|---|---|
customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A |
config | 表单的一些基础配置,主要为http的一些参数,譬如在http请求中给header增加参数:config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } } | object | N/A |
clear | 是否显示面板上清除按钮 | boolean | true |
preview | 是否显示面板上预览按钮 | boolean | true |
reder | 是否显示面板上渲染按钮 | boolean | true |
imp | 是否显示面板上导入按钮 | boolean | true |
exp | 是否显示面板上导出按钮 | boolean | true |
basic-item | 基础组件是否要展示或待选组件列表集合 | boolean/Array | true |
personal-item | 个性化组件是否要展示或待选组件列表集合 | boolean/Array | true |
layout-item | 布局组件是否要展示或待选组件列表集合 | boolean/Array | true |
插槽:
插槽名称 | 说明 |
---|---|
drag | 左侧组件面板插槽,可以在组件面板上面填充一个区域展示内容 |
formName | 当前动态表单名称 |
controlButton | 功能区按钮,如果需要自定义功能按钮可以在这里自定义 |
插槽示例:
<ng-form-design >
<template #controlButton >
<el-button type="text" size="large" @click="initDemo(1)">示例1</el-button>
<el-button type="text" size="large" @click="initDemo(2)">示例2</el-button>
<el-button type="text" size="large" @click="initDemo(3)">示例3</el-button>
</template>
<template slot="formName">
<span> ng-form-elementplus 示例 </span>
</template>
</ng-form-design>
方法:
方法名称 | 参数 | 说明 |
---|---|---|
reset | N/A | 重置动态表单内容 |
validator | N/A | 根据设置的规则验证当前表单内容,返回Promise |
getData | N/A | 表单验证后,获取当前表单数据,返回Promise |
属性:
属性名 | 说明 | 格式 | 默认值 |
---|---|---|---|
formTemplate | 表单模板 | json | 无 |
models | 表单填充数据 | json | 无 |
disabled | 是否禁用 | boolean | false |
renderPreview | 当前是否为预览模式 | boolean | false |
config | 表单的一些基础配置,主要为http的一些参数,譬如在http请求中给header增加参数:config: { httpConfig: (config)=>{ config.headers['aaaa'] = 'bbbb' return config } } | object | N/A |
customComponents | 自定义组件的配置,具体参加最下方自定义组件示例中的格式 | array | N/A |
使用示例:
<template>
<div id="app">
<ng-form-build :formTemplate="formTemplate" :models="models"/>
</div>
</template>
<script>
export default {
data(){
return {
models: {} ,
formTemplate: {}
}
},
created() {
this.formTemplate = require('./data/basic.json')
}
}
</script>
3.1 自定义一个组件(根据文本中输入的地址展示图片)
<template>
<div>
<el-input
v-if="!preview"
type="textarea"
autosize
placeholder="请输入图片地址"
v-model="models[record.model]" :disabled="disabled">
</el-input>
<el-image
:style="record.options.style ? record.options.style : null"
:src="models[record.model]"
fit="scale-down"></el-image>
</div>
</template>
<script>
export default {
props: {
record: {//组件数据
type: Object,
required: true
},
models: {// 表单数组
type: Object,
required: true
},
disabled: { // 是否禁用
type: Boolean,
default: false
} ,
preview: {// 是否当前是预览
type: Boolean ,
default: false
}
},
methods: {
}
}
</script>
3.2 定义一个自定义组件的属性配置组件(后面通过插槽挂到表单绘制面板的属性面板中)
<template>
<!-- 自定义组件的属性配置 -->
<el-form v-show="selectItem.key" size="default" :disabled="disabled">
<!-- TCustom start-->
<template v-if="selectItem.type == 'customT'">
<!-- 开关的label -->
<el-form-item label="图片样式">
<el-input type="textarea" placeholder="请输入" v-model="selectItem.options.style" />
</el-form-item>
</template>
<!-- TCustom end -->
</el-form>
</template>
<script>
export default {
props: {
selectItem: { // 当前选择的组件
type: Object,
required: true
},
disabled: { // 是否禁用
type: Boolean,
default: false
}
}
}
</script>
3.3 在动态表单绘制面板中进行配置
<template>
<div id="app">
<ng-form-design ref="formDesign" :custom-components="customComponents" >
<!-- 自定义属性配置 -->
<template slot="custom-properties" slot-scope="{selectItem}">
<Properties :selectItem="selectItem"/>
</template>
<template slot="formName">
<span> vue-drag-formdesign 示例 </span>
</template>
</ng-form-design>
</div>
</template>
<script>
// 引用自定义的表单组件和自定义组件配置信息修改组件
import CustomT from './components/TCustom'
import Properties from './components/properties'
export default {
name: 'App',
components: {CustomT , Properties},
data(){
return {
// 自定义组件列表
customComponents: [
{
type: 'customT' ,
label: "自定义图片展示", // 标题文字
component: CustomT ,
options: {
style: 'width:100px;height:100px'
},
model: "customT",
key: "customT",
rules: [
{
required: false,
message: "必填项"
}
]
},
]
}
} ,
methods: {
}
}
</script>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。