tq-el-form
v1.1.3
Published
根据elmentUI el-form二次封装
Downloads
9
Readme
tq-el-form
快速引入
注：只适用简单快速生成表单，暂不支持定制化功能
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 |
model 模式设置
| 模式 | 类型 | | -------- | -------- | | add | 添加模式 | | edit | 编辑模式 | | see | 查看模式 | | addHas | 添加模式 | | editHas | 编辑模式 | | seeHas | 查看模式 |
modelConfig 模式设置
| 模式 | 参数 | 效果 | | -------- | ----------------- | ---------------------------------------------------- | | 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",
},
};
},正则校验列表
- 作用 校验数字
- 正则名 digit
- 正则 /^[0-9]*$/
- 邮箱
- /^[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
- http
- /^(?=^.{3,255}$)(http(s)?://)?(www.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)(/\w+.\w+)$/
多字段大小联合校验
{
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: "结束时间"
}
]select 下拉选择器
| 绑定值 | 含义 | 对应 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 |
input 输入框
| 绑定值 | 含义 | 对应 elementUI 的 key | 是否必填 | 类型 | 默认值 | | ----------- | -------- | ------------------------- | ------------ | -------- | ---------- | | prop | 绑定的值 | prop | Y | string | | | label | 显示名 | label | Y | string | | | span | 占几列 | | N | number | 4 | | placeholder | 占位符 | placeholder | N | boolean | |
checkbox 示例
| 绑定值 | 含义 | 对应 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",
},
],
},
];radio 示例
| 绑定值 | 含义 | 对应 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",
},
],
},
];slot 插槽
| 绑定值 | 含义 | 对应 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>