element form表单,element ui formatter
本文主要介绍了元素基于埃尔格式智能的FormSmart表单组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
目录
目的源码关键文档，大部分复制El格式属性方法事件slotscoped插槽表单-项目属性行属性cl属性基本用法使用场景1.通用列表搜索条件2.弹窗写法优化
目的
埃尔格式表单配置化，后期可以利用后端进行配置表单支持栅格布局埃尔格式属性大部分都支持公共配置可以统一处理，如修剪、输入宽度等最基本的组件，利用这组件后期可以优化简单的新增编辑弹窗写法
源码
脚本
导出默认值{
道具：{
型号：{
类型：对象，
默认值：()={},
},
行项目：{
类型：数组，
默认值：()=[],
},
表格项目：{
类型：数组，
默认值：()=[],
},
},
data() {
返回{
_model: {}，
};
},
已安装(){
//用于重置，时间范围选择组件时重置不了结束时间
这个. model={.这个。型号}；
//默认选中光标，设置ref=聚焦
这个。焦点()；
},
方法：{
//处理v型v值值
hanlderValue(prop) {
//时间范围选择组件处理
if(数组。是数组(prop)prop。长度0){
const[first]=prop；
if (this.model[first]) {
常量数据=属性。地图((关键)=这个。model[key])；
返回数据；
}
return[]；
}
归还这个。模型[道具]；
},
//处理表单项绑定值
hanlderFormItemProp(prop) {
//时间范围选择组件处理
if(数组。是数组(prop)prop。长度0){
//处理时间范围选择的
const[first]=prop；
先退；
}
返回道具；
},
//处理改变值
hanlderModel(prop，value) {
//时间范围选择组件处理
if (prop Array.isArray(prop)) {
if (Array.isArray(value)) {
//数组对应值
prop.forEach((key，index)={
这个。model[key]=value值。长度0？值[索引]:"";
});
} else if ([null，，undefined]).包括（值)){
//数组有清除按钮时，数组一起清理
prop.forEach((key)={
这个。model[key]=值；
});
}
}否则{
这个。model[prop]=值；
}
},
焦点(){
这个. nextTick(()={
如果（这个. refs.focus) {
setTimeout(()={
这个参考文献。专注。焦点()；
}, 100);
}
});
},
验证（.道具){
归还这个. refs.form.validate(.道具);
},
//对部分字段进行校验
有效字段（.道具){
归还这个. refs.form.validateField(.道具);
},
//对整个表单进行重置
resetFields() {
Object.assign(this.model，this ._型号);
这个参考文献。形式。重置字段()；
},
//移除表单项的校验结果
清晰验证（.道具){
这个. refs.form.clearValidate(.道具);
},
},
渲染(createElement) {
//父级时间
//表单项标签槽
常量槽标签=(槽名)=createElement(
模板，
{
插槽："标签",
},
这个. slots[slotName]，
);
//formItem组件
const formItem=(item)=createElement(
埃尔-表单-项目，
{
道具：{
.项目，
道具：这个。hanlderformitemprop(项目。道具)，
},
scopedSlots: {
错误：(道具)=这个.$ scopedSlots[item。插槽错误名称]这.$ scopedSlots[item。插槽错误名称](属性)，
},
},
[
//加入标签插槽
item.slotLabelName？slotLabel(item.slotLabelName):" "，
//有插槽优先
item.slotName？这个$插槽[项目。插槽名称]:createElement(项目。键入 El-input ，{
//
ref: item.ref，
属性：{
.道具，
},
道具：{
可清除：真的，
.道具，
价值：这个。hanldervalue(项目。道具)，
},
//加样式
风格：{
宽度："240像素",
.(item.props item.props.style)，
},
开：{
.item.on，
变化：(值)={
//重写变化方法
if (item.on item.on.change) {
item.on.change值);
}
this.hanlderModel(item.prop，value)；
},
//El-输入场景
输入：(值)={
this.hanlderModel(item.prop，value)；
},
},
}),
],
);
//列组件
const col=(item)=createElement( El-col ，{
道具：{
.项目，
},
}，item.formItem？[formItem(项目。formItem)]:")；
//行组件
const row=(item)=createElement( El-row ，{
道具：{
.项目，
},
}，项。科尔斯。map((list)=col(list)))；
返回创建元素(
el-form ，
{
参考："表格",
道具：{
.这个$attrs，
模型：this.model，
},
开：{
.这个。$听众，
},
},
//rowItems优先
this.rowItems.length？这个。行项目。map((item)=row(item)):这个。formitems。map((item)=formItem(item))，
);
},
};
/脚本
style lang= scss module= s /style
关键文档，大部分复制el-form
Attributes
描述类型可选值默认值模型表单数据对象对象——规则表单验证规则对象——内嵌表单模式Boolean-false label-position表单域标签的位置。如果值为left或right，则需要设置label-widestringlight/left/toprightlabel-width表单域标签的宽度，例如， 50px 。表单项是表单的直接子元素，它将继承这个值。支持自动。String——label-suffix后缀string 3354 hidden-required-asterisk是否隐藏必填字段标签旁的红色星号Boolean-false show-message是否显示检查错误消息Boolean-true inline-message是否显示内嵌形式显示验证信息boolean-false status-icon是否在输入框中显示验证结果反馈图标Boolean-false validate-on-rule-change是否在规则属性更改后立即触发验证。boolean-truesize用于控制表单中组件的大小。String中/小/迷你-禁用是否禁用表单中的所有组件。如果设置为true，表单中组件的disabled属性将不再有效。布尔-假-分割线-
Methods
方法名描述了参数validate如何验证整个表单，参数是一个回调函数。这个回调函数将在验证后被调用，传入两个参数：验证是否成功，验证失败的字段。如果回调函数没有传入，它将返回一个方法函数(props: array string，Callback:Function(error message:string))重置字段重置整个表单，将所有字段值重置为初始值并删除验证结果—clearValidate删除表单项的验证结果。传入要移除的表单项的prop属性或由props组成的数组。否则，删除整个表单的验证结果。function(props:array string)Focus使输入获得焦点-blur使输入失去焦点，并隐藏下拉框-
Events
事件描述回调参数validate任何表单项通过验证后，无论验证是否通过，都会触发被验证表单项的属性值，以及错误信息(如果有)
Slot
解释名称标签标签文本的内容。
Scoped Slot
说明nameerror自定义表单验证信息的显示方式，参数为{error}
Form-Item Attributes
描述参数类型可选值默认值属性表单字段模型字段。当使用validate和resetFields方法时，此属性是必需的字符串。表单组件模型中的字段—标签标签文本字符串3354标签宽度表单字段标签的宽度，例如，“50px”。支持自动。string ——是否必填，如果未设置，将根据校验规则自动生成boolean—falserules表单校验规则对象——错误表单字段校验错误消息。设置此值会将表单验证状态更改为错误，并显示错误消息string——show-message是否显示检查错误消息boolean-true inline-message在inline表单中显示检查信息boolean-false size，用于控制表单字段stringmedium/small/mini-下的组件大小
Row Attributes
参数类型可选值默认值gutter grid interval number—0type布局模式，可选flex，modern browser string下的有效水平排列——justifyflex布局string start/end/center/space-around/space-between startAlignFlex布局和stringtop/middle/bottom-tag自定义元素标签string*div
Col Attributes
参数说明类型可选值默认值跨度栅格占据的列数数量—24偏移量栅格左侧的间隔格数数字-0按下栅格向右移动格数数字-0拉栅格向左移动格数编号—0x768像素响应式栅格数或者栅格属性对象数量/对象（例如：{span: 4，offset: 4})——sm768px响应式栅格数或者栅格属性对象数量/对象（例如：{span: 4，offset: 4})——md992px响应式栅格数或者栅格属性对象数量/对象（例如：{span: 4，offset: 4})——lg1200px响应式栅格数或者栅格属性对象数量/对象（例如：{span: 4，offset: 4})——xl1920px响应式栅格数或者栅格属性对象数量/对象（例如：{span: 4，offset:4 })——标签自定义元素标签字符串*div
基本用法
演示直接使用表单项目属性来配置表单
模板
差异
智能数字表单
ref=form
:model=form
标签宽度= 150像素
标签位置=左
:form-items=formItems
模板#slotErrorName
跨度按钮/span
/模板
模板#区域-标签
el-badge :value=12 class=item
跨度自定义标签/span
/el-badge
/模板
模板#btn
El-button type= primary @ click= submit 提交/el-button
/模板
/d-窗体-智能
/div
/模板
脚本
导出默认值{
data() {
返回{
表单：{
名称： ,
区域： ,
日期：[],
发货：假的，
人员： ,
收音机："",
复选框：[],
级联：[],
时间选择： ,
日期选取器： ,
开始时间： ,
结束时间： ,
比率：0,
特殊： ,
desc:没有，
},
规则：{
名称：[
{必需：真，消息： 请输入活动名称，触发：模糊 },
{
分钟：3,
最大：5,
消息： 长度在3到5个字符，
触发器："模糊",
},
],
},
表格项目：[
{
标签: 名字，
道具："名称",
类型：“El-输入",
道具：{
占位符： 请输入内容，
},
},
{
标签: 开关，
道具："交付",
类型：“el开关",
},
{
属性："区域",
键入： d-选择-智能，
slotLabelName:区域标签，
道具：{
列表：[],
},
},
{
标签: 级联，
道具：“cascader”，
类型：“el-cascader”，
道具：{
选项：[
{
值：志南，
标签: 指南，
儿童：[
{
值：佘吉元则，
标签: 设计原则，
儿童：[
{
值：一枝，
标签: 一致，
},
{
值：樊葵，
标签: 反馈，
},
{
值："小驴",
标签: 效率，
},
{
值：科空，
标签: 可控，
},
],
},
],
},
],
},
},
{
标签: 时间选择，
道具："时间选择",
键入： el时间选择，
道具：{
占位符： 选择时间，
},
},
{
标签: 日期选择，
道具："日期选择器",
键入：电子日期选择器，
道具：{
占位符： 选择日期，
值格式： yyyy-MM-dd ，
},
},
{
标签: 日期范围选择，
prop: [startTime ， endTime]，
键入：电子日期选择器，
道具：{
类型："日期范围",
startPlaceholder:开始日期，
endPlaceholder:结束日期，
格式：“yyyy-MM-dd”，
值格式： yyyy-MM-dd ，
},
},
{
标签: 评分，
属性："速率",
类型：“el-rate”，
},
{
标签: 备注，
道具：《desc》、
类型：“El-输入",
道具：{
占位符： 请输入内容，
类型："文本区域",
风格：{
宽度："400像素",
},
},
},
{
插槽名称：“btn”，
道具：{},
},
],
};
},
方法：{
更改（值){
console.log(change ，val)；
},
提交(){
控制台。日志(这个。形式)；
}
},
};
/脚本
使用场景
1. 通用列表搜索条件
配置queryItems: [
{
标签: 属性编码，
属性：属性值代码，
道具：{
占位符： 属性编码，
},
},
{
标签: 属性名称，
道具："名称",
道具：{
占位符： 属性名称，
},
},
],
模板写法智能数字表单
@submit.native.prevent
ref=query
在一条直线上的
:model=query
标签宽度=80px
标签位置=右
:form-items=queryItems
/d-窗体-智能
2.弹窗写法优化
简单的新增表单v模型绑定的值规则规则表单项目表单配置异步添加(){
尝试{
//重置表单
Object.assign(this.form，this .$options.data().形式);
这个. msgbox({
自定义类别：[自定义消息框],
标题： 新增属性，
留言：这个$createElement(FormSmart ，{
参考："表格",
key: Math.random()，//重新创建，不缓存
属性：{
标签宽度："100像素",
标签位置："右",
模型：this.form，
规则：this.opRules，
formItems: opItems，
},
}),
closenclickmodal:false，
showCancelButton: true，
confirmButtonText:确定，
取消按钮文本： 取消，
关闭前：异步(操作、实例、完成)={
if (action===confirm) {
等待这个参考文献。形式。validate()；
实例。确认按钮加载=真；
尝试{
//请求接口编写的地方
实例。确认按钮加载=假；
done()；
} catch(错误){
实例。确认按钮加载=假；
}
}否则{
这个参考文献。形式。重置字段()；
done()；
}
},
});
} catch(错误){
控制台.错误(错误);
}
},
到此这篇关于元素基于埃尔格式智能的FormSmart表单组件的文章就介绍到这了，更多相关元素表单智能表单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。