xaboy / form-create Goto Github PK
View Code? Open in Web Editor NEW:fire::fire::fire: 强大的动态表单组件,通过数据驱动表单渲染,适配移动端,支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
Home Page: https://www.form-create.com/
License: MIT License
:fire::fire::fire: 强大的动态表单组件,通过数据驱动表单渲染,适配移动端,支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
Home Page: https://www.form-create.com/
License: MIT License
在main.js 文件中 import formCreat from 'form-create'
然后在 其它vue文件中,。就报错了
能不能有一个iview 非引用CDN的DEMO吖,很想用,无奈刚手,研究了好几天,没用上
我在同一个页面创建多个表单,会出现错误,事件响应最后一个。
并且我不可以在第一个创建的表单的提交事件理再次创建一个表单
有typescript的支持方法吗?
1.type为checkbox时,其中
validate:[
{ required: true, message: '请选择标签', trigger: 'change' },
]
选中后还是会提示请选择标签
2. type 为DatePicker时,其props.type分别为date和datetime时 其中
validate:[
{ required: true, message: '请选择时间', trigger: 'change' },
]
选择时间后还是会提示选择时间。
详细的mock数据
[
{
type:"checkbox",
title:"标签",//label名称
field:"label",//字段名称
value:[],//input值,
options:[
{value:"1",label:"好用",disabled:false},
{value:"2",label:"方便",disabled:false},
{value:"3",label:"实用",disabled:false},
{value:"4",label:"有效",disabled:false},
],
props: {
"size":"default", //多选框组的尺寸,可选值为 large、small、default 或者不设置
},
event:{
//只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发
change:(...arg)=>{},
},
validate:[
{ required: true, message: '请选择标签', trigger: 'change' },
]
},
{
type: "DatePicker",
field: "section_day",
title: "活动日期",
value: '', //input值, type为daterange,datetimerange value为数组 [start_value,end_value]
props: {
"type": "date", //显示类型,可选值为 date、daterange、datetime、datetimerange、year、month
"format": "yyyy-MM-dd", //展示的日期格式
"placement": "bottom-start", // 日期选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
"placeholder":"请选择获得时间", //占位文本
"confirm":false, //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭
"size":"default", //尺寸,可选值为large、small、default或者不设置
"disabled":false, //是否禁用选择器
"clearable":true, //是否显示清除按钮
"readonly":false, //完全只读,开启后不会弹出选择器
"editable":false, //文本框是否可以输入
},
validate:[
{ required: true, message: '请选择活动日期', trigger: 'change' },
]
},
{
type: "DatePicker",
field: "section_time",
title: "活动日期和时间",
value: '', //input值, type为timerange value为数组 [start_value,end_value]
props: {
"type": "datetime", //显示类型,可选值为 time、timerange
"format": "yyyy-MM-dd HH:mm:ss", //展示的时间格式
"steps": [], //下拉列表的时间间隔,数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时,分钟会显示:00、15、30、45。
"placement": "bottom-start", // 时间选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
"placeholder":"请选择获得时间", //占位文本
"confirm":false, //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭
"size":"default", //尺寸,可选值为large、small、default或者不设置
"disabled":false, //是否禁用选择器
"clearable":true, //是否显示清除按钮
"readonly":false, //完全只读,开启后不会弹出选择器
"editable":false, //文本框是否可以输入
},
validate:[
{ required: true, message: '请选择日期和时间', trigger: 'change' },
]
},
{
type: "InputNumber",
field: "sort",
title: "排序",
value: 0, //input值
props: {
"max": undefined, //最大值
"min": undefined, //最小值
"step": 1, //每次改变的步伐,可以是小数
"size":"default", //输入框尺寸,可选值为large、small、default或者不填
"disabled":false, //设置禁用状态
"readonly":false, //是否设置为只读
"editable":true, //是否可编辑
},
validate:[
{ required: true, message: '请选择数字', trigger: 'blur' },
]
},
];
不改变时间的情况下提交表单,后台获取不到时间字段,改变时间后,后台又可以获得.
以element demo为基础,修改时发现,动态修改disabled=true,部分组件无法立即生效,需值改变后才会锁定。
组件有:radio,checkbox,select,switch,DatePicker,TimePicker,InputNumber,ColorPicker,rate,slider
对于radio和checkbox,额外设置options的disabled=true也不行。
但是如果一开始json设置为true,则是可以锁定的。
看了下官方文档,有写到:
说明: 如果修改后没有生效,需要提前在生成规则里定义该规则
我的json这些rule都有定义disabled=false
代码如下:
for(let i in $f.rule){
let rule=$f.rule[i];
if(_vm.readonly){
rule.props.disabled=true;
if(rule.type=="radio" || rule.type=="checkbox2" ){
for(let z in rule.options)rule.options[z].disabled=true;
}
}
}
请问是不支持还是哪里有问题?
PS:刚测试了一下,json定义disabled=true,通过代码动态设为false,这样是可以的
@xaboy, I have a select
defined with:
{
type: 'select',
field: 'brandId',
title: 'brand',
props: {
clearable: true,
placeholder: null
},
validate: [
{
required: true,
message: 'required',
trigger: 'blur'
}
]
},
When I submit the form the required validation
displays, even though I have set a value in the select:
我有个select,有两个数据,选择了另外一个就展示另外一个表单,选回另一个就展示回来,请问这个可以实现么?
使用form的changeField改变field的值不会触发change事件
请问能把源码中的注释添加一下吗?想扩展下,但没有注释很多代码看起比较痛苦
请问上传图片有表单验证吗
比如页面表单b 需要表单a 有值时才可以显示。
select a 选中之后 select b才能选择
iview 3.1.5....iview Demo 全是引用CDN的,在非CND。。组件引用的时候就用不了了。加QQ群也没反应。。。
@xaboy, the documentation is not too clear on how to use the remote method on Select
.
I have this field definition:
{
type: 'select',
field: 'teamTypeId',
title: 'team type',
props: {
'remote': true,
'remote-method': this._buildTypeList
}
}
And the _biuldTypeList
function is defined as:
_buildTypeList () {
const options = [
{
'value': 1,
'label': 'test'
},
{
'value': 2,
'label': 'test 2'
}
]
return options
}
But, when the form renders, there are no options in the select.
把各个组件按需要拖拽到界面上,配置相关参数,然后生成界面。
看最新的代码,好像已经用工厂类去做不同的组件了
应该是可以支持ant design vue的吧?
请问提交按钮不显示如何设置为false
怎么批量生成一个表单?什么时候做成程序直接生成一个表单?
I am not able to find a 'disabled' propertiy for the 'upload' component. pls help
作者大大,是否考虑支持el哩?
请问以前版本的上传图片之后点击预览的事件,现在是否需要自己写了,还是可以继续延续之前的方法
我在项目下
npm install --save form-create
然后在main.js中
引入并使用
import formCreate from 'form-create'
Vue.use(formCreate)
居然报
This dependency was not found:
To install it, you can run: npm install --save form-create
请问这是什么原因呢
Hi,
I really want to continue implementing this lib and it would be really helpful if an English version of the documentation is available.
BTW great job doing this lib.
点击radio属性,这个change只能获取到点击之前的值,点击之后的值获取不到。。。
麻烦作者怎么能获取点击之后的值
我看了change属性是点击的时候触发,应该是改变值之前触发的,建议增加changed属性,表示点击之后。
Some of the components seems to have Chinese labels. Examples:
ColorPicker
: OK and Cancel buttonDatePicker
: Day namesIs there a global setting to use a specific language?
搞过视频教程就好了
@xaboy, are there any helper methods to pre-populate a form with data? I want to be able to pass in an object (JSON data) to the form, and based on the field
property, be populated with data from the object.
Example data object:
{
name: 'John Smith',
email: '[email protected]'
}
Form rules:
[{
type: 'input',
field: 'name',
title: 'name',
},
type: 'input',
field: 'email',
title: 'email',
}]
Form::frameImageOne('image','产品主图片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')))->icon('image')->width('100%')->height('550px'),
点击眼睛按钮,可查看无法关闭,哪里可以写回调?还是有其他办法
form.validate方法在errFn中能否把验证失败的表单元素集合作为参数带到回调函数里面
请问不能这样用么?只能是js引入的方式?
form组件有没有一个方法,将form里面所有的Field置为readOnly。
new Vue({
data:{
formData:{}
},
mounted:function(){
...
//绑定表单数据到formData
$f.model(this.formData);
}
})
目前的双向绑定,formData的数据格式为{field: {rule: object, value: xxx}}
而实际使用过程中,form的定义和数据是分开的,实际的值并不是放在form定义里的value,所以,希望能支持value双向绑定,实现类似以下的效果:
new Vue({
data:{
formData:{
field1: value1,
field2: value2,
...
}
},
mounted:function(){
...
//绑定表单数据到formData,替换form里默认的value值
$f.model(this.formData);
}
})
AutoComplete 自动完成 这个组件后台开发经常会用到,不知道大牛有计划开发没有
请问需要在上传文件之前,对图片进行压缩再上传的话,可以在beforeUpload中操作吗
大神,请问自定义按钮怎么显示出文字, 我这样设置,按钮出来了,但是没有问题,图标也没出来.
{ type: "i-button", field: "mySubmit", value: "搜索", props: { "type": "primary", "loading": true, "icon": "md-search" }, col:{ span:8 } }
就是能根据后台给的一份json,然后前台根据json生成表单可以么?我看现在给的例子mock里面都是带函数的...如果由后台控制的话该如何传规则呢
demand:Two form controls,Linkage between form controls
Type: pull-down selection,
Product category: pull-down selection, (the initial state is hidden)
After selecting the type, a request is sent to the background. If the type has optional product classification, the product classification will be displayed
我先建立form, 然后想直接填入数据formdata={xx1:yy1m xx2:yy2, ...}。
之前用的是 $f.bind()[xx1]= yy1
, 写在mounted里面, 需要设置一个timeout, 过几秒跑才行。
现在用了1.5版本, $f.bind()失败了, 看定义有个参数? ƒ (e){var n=this,i={},r=t.vm;return ...
, 但文档里面还是无参数.
然后用formData设置值, 因为现在加载太快了, mounted里面加入timeout也不行.
怎样传入数据呢?
有时需要表单提供表格查看数据,有计划支持表格控件吗?
刚好有个需求需要实现动态添加、删除和移动顺序的功能
有时需要表单提供表格查看数据,有计划支持表格控件吗?
$f.setValue(field,value) $f.setValue({ field1:value1, field2:value2, field3:value3 });
调用setValue后,通过$f.formData获取到值已经发生改变,但是控件view内容并未发生改变,请问是什么原因呢
How would I call a method defined on the component in the onSubmit
? Currently this.add(formData)
does not work.
elementUI 不能用 不显示
you said value
is not compulsory and label
is. I however found they r in the opposite situation...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.