注:只适用简单快速生成表单,暂不支持定制化功能
返回目录
npm i tq-el-form
(全局引入)
main.js
import tqElForm from "tq-el-form"
Vue.use(tqElForm)
<tq-el-form
ref="tq_form"
:colCount="4"
:formData="formData"
:formArr="formArr"
:parameterObj="parameterObj"
>
<template slot-scope="obj" slot="aa">
{{ obj }}
</template>
</tq-el-form>
const formData = {
title: "",
userArr: "",
rate: 0
}
const formArr = [{
title: "这是标题",
prop: "title",
label: "标题",
validator: "commonValid",
reg: "phone",
noStar: true
},
{
prop: "date",
label: "日期",
type: "date",
great: "now",
},
{
prop: "date1",
label: "日期1",
type: "date",
},
{
prop: "num1",
label: "数字1",
validator: "fieldsValid",
fields: [
{
opr: "大于",
prop: "num2",
label: "数字2"
}
]
},
{
prop: "num2",
label: "数字2",
noStar: true,
},
{
prop: "userArr",
label: "用户",
type: "select",
// selectIndex: 0,
},
{
prop: "rate",
label: "评分",
type: "rate",
},
{
prop: "switch",
label: "开关",
type: "switch",
},
{
prop: "slot",
label: "插槽",
type: "slot",
slotName:"aa"
},
{
prop: "checkbox",
label: "复选框",
type: "checkbox",
checkboxArr: [
{
value: "11",
label: "11"
},
{
value: "22",
label: "22"
}
]
},
{
prop: "radio",
label: "单选框",
type: "radio",
radioArr: [
{
value: "11",
label: "11"
},
{
value: "22",
label: "22"
}
]
}
];
const parameterObj = {
userArr: [
{
label: "用户1",
value: "用户1",
},
{
label: "用户2",
value: "用户2",
},
],
}
绑定值 |
含义 |
是否必填 |
类型 |
默认值 |
formArr |
表格数组 |
Y |
Array |
|
formData |
表格绑定值 |
N |
Object |
|
parameterObj |
枚举列表 |
N |
Object |
|
size |
同 elementUI el-table size |
N |
string |
medium |
labelWidth |
同 elementUI el-table label-width |
N |
string |
|
gutter |
同 elementUI el-row gutter |
N |
number |
20 |
colCount |
总共分几列 |
N |
number |
4 |
type |
类型 类型列表
|
N |
string |
|
类型值 |
类型 |
date |
日期 |
select |
select 下拉 |
rate |
评分 |
switch |
switch 开关 |
checkbox |
checkbox 复选框 |
radio |
radio 单选框 |
slot |
slot 插槽 |
let parameterObj = {
[formArr[i].prop]:[
{
value:"",
label:"",
}
]
}
返回目录
方法名 |
作用 |
参数 |
init |
初始化表单(this.$refs.form.init()) |
|
get_data_by_prop |
外部根据 key 获取值 |
key 为对应字段的 prop |
get_data_by_props |
外部根据 [key1,key2,...] 获取值 |
key 为对应字段的 prop |
set_data_by_props |
外部根据 {key:value} 设置值 |
key 为对应字段的 prop,value 为要设置的值 |
reset_form |
还原表单数据(所有数据变回原本值(绑定的 formData 原值)) |
|
clear_form |
清空表单数据(所有数据置空) |
|
- |
- |
- |
emit_focus |
事件-聚焦 |
返回对应项 {prop:"",label:"",...} |
emit_btn |
事件-按钮点击 |
返回对应项 |
emit_change |
事件-改变 |
返回对应项 |
emit_input |
事件-改变(input 标签的 input 事件) |
返回对应项 |
emit_removeTag |
事件-tag 移除 |
返回对应项 |
check_change |
事件-校验当前表单是否修改 |
返回发生修改的数组(oldValue:原值,newValue:新值) |
get_data |
事件-获取表单数据(附带校验) |
返回 回调函数 (form:object,formChangeObj:object) |
返回目录
绑定值 |
含义 |
是否必填 |
类型 |
默认值 |
prop |
绑定的值 |
Y |
string |
|
label |
显示名 |
Y |
string |
|
span |
占几列 |
N |
number |
4 |
noStar |
是否显示表单校验星号(设置校验时可不展示星号,例如:空不校验,非空校验) |
N |
boolean |
false |
validator |
开启校验 |
N |
string |
commonValid (passValid(二次确认密码的校验,fieldsValid(多字段联合校验))) |
reg |
校验时正则表达式 |
N |
string |
正则校验列表 |
regCustom |
自定义正则 |
N |
string |
|
regCustomName |
自定义正则报错提示 |
N |
string |
请正确输入 xxx |
返回目录
模式 |
类型 |
add |
添加模式 |
edit |
编辑模式 |
see |
查看模式 |
addHas |
添加模式 |
editHas |
编辑模式 |
seeHas |
查看模式 |
返回目录
模式 |
参数 |
效果 |
model |
readonly/disabled |
设置表单禁用类型 readonly 只读,disabled 置灰不可编辑 |
add |
"prop,prop,..." |
添加模式 prop 为 formArr 每项对应的 prop |
edit |
"prop,prop,..." |
编辑模式 ... |
see |
"prop,prop,..." |
查看模式 (see:"" 不设置值时,默认禁止全部) |
addHas |
"prop,prop,..." |
添加模式 当有值时才触发 禁止修改 |
editHas |
"prop,prop,..." |
编辑模式 ... |
seeHas |
"prop,prop,..." |
查看模式 ... |
返回目录
// 添加是title是禁用
<tq-el-form
ref="tq_form"
:colCount="4"
:formArr="formArr"
:formData="formData"
:model="model"
:modelConfig="modelConfig"
:parameterObj="parameterObj"
></tq-el-form>
data() {
return {
formData: [],
formArr: [
{
prop: "title",
label: "标题",
},
],
parameterObj: [],
model: "add",
modelConfig: {
model: "disabled",
add: "title",
},
};
},
返回目录
- 作用 校验数字
- 邮箱
- email
- /^[A-Za-z\d]+([-_.][a-za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/
- 电话号
- phone
- /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
- 汉字
- chineseCharacter
- /^[\u4e00-\u9fa5]{0,}$/
- IP
- ip
- /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
- 域名
- domain
- /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
- http
返回目录
{
prop: "num1",
label: "数字1",
validator: "fieldsValid",
// 多字段校验
// 会自动把对应字段取反 例如:目前只设置了 num1 大于 num2 内部会自动生成num2 小于等于 num1
fields: [
{
// opr [大于|大于等于|等于|不等于|小于等于|等于]
opr: "大于",
// 其他字段的prop
prop: "num2",
// 报错后的提示 模板 `${num1} ${opr} ${label} `
label: "数字2"
}
]
},
{
prop: "num2",
label: "数字2",
noStar: true,
},
返回目录
绑定值 |
含义 |
对应 elementUI 的 key |
是否必填 |
类型 |
默认值 |
prop |
绑定的值 |
prop |
Y |
string |
|
label |
显示名 |
label |
Y |
string |
|
span |
占几列 |
|
N |
number |
4 |
placeholder |
占位符 |
placeholder |
N |
boolean |
|
clearable |
是否可清空 |
clearable |
N |
boolean |
false |
dateType |
日期组件的类型 |
type |
N |
string |
datetime |
valueFormat |
绑定值的格式。 |
value-format |
N |
string |
|
format |
显示在输入框中的格式 |
format |
N |
string |
|
great |
大于对应日期(变灰) |
|
N |
string |
|
less |
小于于对应日期(变灰) |
|
N |
string |
|
返回目录
let formArr = [
{
// v-model绑定的值
prop: "date",
// el-form-item label绑定值
label: "日期",
// 格式类型
type: "date",
// great-大于 less-小于
// now 当前时间
// [prop] 其他字段的prop值 例 greate:endTime
great: "now",
},
{
prop: "endTime",
label: "结束时间"
}
]
返回目录
绑定值 |
含义 |
对应 elementUI 的 key |
是否必填 |
类型 |
默认值 |
prop |
绑定的值 |
prop |
Y |
string |
|
label |
显示名 |
label |
Y |
string |
|
span |
占几列 |
|
N |
number |
4 |
placeholder |
占位符 |
placeholder |
N |
boolean |
|
clearable |
是否可清空 |
clearable |
N |
boolean |
false |
multiple |
多选 |
multiple |
N |
boolean |
false |
collapse |
折叠多选 |
collapse-tags |
N |
boolean |
false |
返回目录
绑定值 |
含义 |
对应 elementUI 的 key |
是否必填 |
类型 |
默认值 |
prop |
绑定的值 |
prop |
Y |
string |
|
label |
显示名 |
label |
Y |
string |
|
span |
占几列 |
|
N |
number |
4 |
placeholder |
占位符 |
placeholder |
N |
boolean |
|
返回目录
绑定值 |
含义 |
对应 elementUI 的 key |
是否必填 |
类型 |
默认值 |
prop |
绑定的值 |
prop |
Y |
string |
|
label |
显示名 |
label |
Y |
string |
|
span |
占几列 |
|
N |
number |
4 |
min |
最少选几个 |
min |
N |
number |
|
max |
最多几个 |
max |
N |
number |
|
checkboxArr |
checkbox 数组 |
|
Y |
array |
|
const formArr = [
{
prop: "checkbox",
label: "复选框",
type: "checkbox",
// 复选框的数组
checkboxArr: [
{
// 复选框绑定的值
value: "11",
// 复选框显示的值
label: "1",
},
{
value: "22",
label: "2",
},
],
},
];
返回目录
绑定值 |
含义 |
对应 elementUI 的 key |
是否必填 |
类型 |
默认值 |
prop |
绑定的值 |
prop |
Y |
string |
|
label |
显示名 |
label |
Y |
string |
|
span |
占几列 |
|
N |
number |
4 |
radioArr |
radio 数组 |
|
Y |
array |
|
const formArr = [
{
prop: "radio",
label: "单选框",
type: "radio",
// 单选框的数组
radioArr: [
{
// 单选框绑定的值
value: "11",
// 单选框显示的值
label: "1",
},
{
value: "22",
label: "2",
},
],
},
];
返回目录
绑定值 |
含义 |
对应 elementUI 的 key |
是否必填 |
类型 |
默认值 |
prop |
绑定的值 |
prop |
Y |
string |
|
label |
显示名 |
label |
Y |
string |
|
span |
占几列 |
|
N |
number |
4 |
slotName |
插槽名 |
|
N |
string |
|
const formArr = [
{
prop: "slot",
label: "插槽",
type: "slot",
slotName: "aa",
},
];
// obj.form 表单数据
// obj.item 当前行数据
<tq-el-form
ref="tq_form"
:colCount="4"
:formArr="formArr"
>
<template slot-scope="obj" slot="aa">
{{ obj.form }}
{{ obj.item }}
</template>
</tq-el-form>