VUE+ELEMENT-UI的后台项目封装组件--查询form的封装
最近项目打算重构,项目的模块几乎都是以后台查询展示的传统的增删改差模式,所以卑微的我想要自己封装一下查询form,先上效果图
子组件页面:
<template>
<div class="sumbit-form">
<el-form
:model="value"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<slot name="formItem" />
<template v-for="(item, index) in formConfig.formItemList">
<el-row :key="index">
<template v-for="(i, k) in item">
<el-col :span="8" :key="k">
<template
v-if="
['text', 'textarea', 'number', 'email'].indexOf(i.type) !== -1
"
>
<el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
<el-input :type="i.type" v-model="value[i.name]"></el-input>
</el-form-item>
</template>
<template v-if="i.type === 'select'">
<el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
<el-select v-model="value[i.name]" placeholder="">
<el-option
v-for="(j, k) in i.optList"
:key="k"
:label="j.label"
:value="j.value"
></el-option>
</el-select>
</el-form-item>
</template>
<template
v-if="
['data', 'datetimerange', 'datetime'].indexOf(i.type) !== -1
"
>
<el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
<el-date-picker
v-model="value[i.name]"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
</template>
<template v-if="i.type == 'switch'">
<el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
<el-switch v-model="value[i.name]"></el-switch>
</el-form-item>
</template>
<template v-if="i.type == 'radio'">
<el-form-item :label="i.label">
<el-radio-group v-model="value[i.name]">
<el-radio
v-for="(j, k) in i.optList"
:label="j"
:key="k"
></el-radio>
</el-radio-group>
</el-form-item>
</template>
<template v-if="i.type === 'Checkbox'">
<el-checkbox-group v-model="value[i.name]">
<el-checkbox
v-for="ch in i.checkboxs"
:label="ch.value"
:key="ch.value"
>{{ ch.label }}</el-checkbox
>
</el-checkbox-group>
</template>
</el-col>
</template>
</el-row>
</template> <div class="searchBtn">
<el-button-group>
<el-button
v-for="(item, index) in formConfig.operate"
:key="index"
size="small"
:type="item.type"
@click.stop.prevent="item.handleClick"
>{{ item.name }}
</el-button>
</el-button-group>
<slot name="operate"></slot>
</div>
</el-form>
</div>
</template>
<script>
export default {
props: {
formConfig: {
type: Object,
default: () => {}
},
value: {
type: Object,
default: () => {}
},
rules: {
type: Object,
default: () => {}
}
},
data() {
return {
isSearchLock: true
};
},
created() {},
methods: {
//子组件校验,传递到父组件
validateForm() {
let flag = null;
if (this.isSearchLock) {
this.$refs["ruleForm"].validate(valid => {
let vm = this;
if (valid) {
flag = true;
vm.isSearchLock = flag;
} else {
flag = false;
vm.isSearchLock = flag;
this.$message.error("保存信息不完整,请继续填写完整");
setTimeout(function() {
vm.isSearchLock = true;
}, 2000);
}
});
return flag;
}
},
resetFields() {
this.$refs["ruleForm"].resetFields();
}
},
mounted() {}
};
</script>
<style lang="less">
.el-form-item__content {
.el-date-editor--datetimerange {
width: 100%;
}
}
.searchBtn {
text-align: center;
.el-button {
background-color: #4a91d7;
width: 96px;
color: #fff;
&:first-child {
margin-right: 5px;
}
&:hover {
background-color: #257ccd;
border-color: #257ccd;
}
}
}
</style>
父组件里面调用
<flight-form
ref="childRules"
:formConfig="formConfig"
:value="form"
:rules="rules"
></flight-form>
<script>
import flightForm from "@/components/flightForm.vue";
export default{
components: {
flightForm , },
data() {
return {
formConfig: {
formItemList: [
[
{
type: "text",
prop: "airport",
label: "站点",
name: "airport",
placeholder: "请输入站点"
},
{
type: "select",
prop: "importOrExport",
label: "进出港",
name: "importOrExport",
placeholder: "请输入进出港",
optList: [
{
value: "",
label: ""
},
{
value: "进港",
label: "进港"
},
{
value: "出港",
label: "出港"
}
]
},
{
type: "select",
prop: "mainOrSubBill",
name: "mainOrSubBill",
label: "主分单", placeholder: "请输入主分单",
optList: [
{
value: "",
label: ""
},
{
value: "主分",
label: "主分"
},
{
value: "主单",
label: "主单"
}
]
}
],
[
{
type: "datetimerange",
name: "pickerdata",
label: "选择时间",
prop: "pickerdata",
dateFormate: "yyyy-MM-dd HH:mm:ss"
},
{
type: "text",
name: "largeClass",
prop: "largeClass",
label: "大类",
placeholder: "请输入大类"
},
{
type: "select",
name: "isDomestic",
prop: "isDomestic",
value: "国内",
label: "国内/国际",
placeholder: "请输入国内/国际",
optList: [
{
value: "",
label: ""
},
{
value: "国内",
label: "国内"
},
{
value: "国际",
label: "国际"
}
]
}
],
[
{
type: "switch",
name: "save",
prop: "save",
label: "保存"
},
{
type: "radio",
name: "radio",
prop: "radio",
label: "活动类型",
optList: ["演唱会", "球赛"]
},
{
type: "Checkbox",
label: "爱好",
prop: "Checkbox",
name: "Checkbox",
checkboxs: [
{ label: "羽毛球", value: "badminton" },
{ label: "篮球", value: "basketball" },
{ label: "足球", value: "football" },
{ label: "兵乓球", value: "pong" }
]
}
]
], operate: [
{
type: "primary",
name: "查询",
handleClick: this.search
},
{
type: "primary",
name: "重置",
handleClick: this.add
}
]
},
rules: {
airport: [{ required: true, message: "请输入站点", trigger: "blur" }],
importOrExport: [
{ required: true, message: "请输入进出港", trigger: "blur" }
],
largeClass: [
{ required: true, message: "请输入大类", trigger: "blur" }
],
mainOrSubBill: [
{ required: true, message: "请输入主分单", trigger: "blur" }
],
isDomestic: [
{ required: true, message: "请输入国内/国际", trigger: "blur" }
],
pickerdata: [
{ required: true, message: "请输入时间", trigger: "change" }
]
},
form: {
isDomestic: "国内",
mainOrSubBill: "主分",
importOrExport: "进港",
airport: "",
largeClass: "",
Checkbox: [],
pickerdata: [],
save: false,
radio: ""
},
}
},
methods: {
// 查询
search() {
let flag = this.$refs["childRules"].validateForm();
if (flag) {
console.log(this.form);
}
},
// 新增或重置
add() {
this.$refs["childRules"].resetFields();
},
},
}
}
</script>
父组件里面的form传给子组件是传默认值的,
卑微前端,记录自己的项目封装的组件,方便以后自己用,如果有哪里不合理,请各路大神多多指教。
VUE+ELEMENT-UI的后台项目封装组件--查询form的封装的更多相关文章
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- Vue+element UI实现“回到顶部”按钮组件
介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装el ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- 在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
微信开发包括公众号.企业微信.微信小程序等方面的开发内容,需要对腾信的微信API接口进行封装:包括事件.菜单.订阅用户.多媒体文件.图文消息.消息群发.微信支付和企业红包.摇一摇设备.语义理解.微信小 ...
随机推荐
- Java——native关键字
说明:在使用HashSet的过程中,查看Object.java过程中发现hashCode()方法是以native关键字修饰,没看到过该关键字,这里记录下来. native关键字用来修饰方法,是使用一些 ...
- PowerDesigner使用教程(二)
在PowerDesigner使用教程(一)中已经介绍了基本用法,下面介绍一些使用技巧. 1. 生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路 ...
- [Axure教程]0001.新手入门基础
Axure RP是一个专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写.Axure RP已被一些大公司 ...
- [Objective-C] 010_Foundation框架之NSSet与NSMutableSet
在Cocoa Foundation中的NSSet和NSMutableSet ,和NSArray功能性质一样,用于存储对象属于集合.但是NSSet和NSMutableSet是无序的, 保证数据的唯一性, ...
- python调用大漠插件教程02大漠插件绑定测试工具
什么是大漠插件绑定测试工具? 这是大漠插件为了方便使用者调试绑定窗口的模式而设计的,因为有些程序不会接受一般的鼠键事件的响应模式,每个程序所需要的响应模式都不尽相同,所以这个工具可以使我们在绑定窗口时 ...
- 06 . Python3入门之IO编程(文件操作)
IO编程简介 IO在计算机中指Input/Output,也就是输入和输出.由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘.网络等,就需要IO接口 ...
- 学习使用pyquery解析器爬小说
一.背景:个人喜欢在网上看小说,但是,在浏览器中阅读小说不是很方便,喜欢找到小说的txt版下载到手机上阅读,但是有些小说不太好找txt版本,考虑自己从网页上爬一爬,自己搞定小说的txt版本.正好学习一 ...
- DevOps - 从渐进式交付说起(含实践 Demo)
作者:CODING - 王炜 1. 开篇 如果让你主导一款千万.甚至亿级用户产品的功能迭代,你会怎么做?你需要面对的挑战可能来自于: 商业战略的变化带来新的产品诉求,而产品的任何改动哪怕仅是界面调整, ...
- JavaSE (五)面向对象 -- 概述
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 目录 一.面向对象的主线 二.面向对象 VS 面向过程 三 . java最基本的两个要素 - 类和对象 ...
- Java实现蓝桥杯凑算式(全排列)
题目6.凑算式 凑算式 B DEF A + - + ------- = 10 C GHI (如果显示有问题,可以参见[图1.jpg]) 这个算式中AI代表19的数字,不同的字母代表不同的数字. 比如: ...