VUE+ELEMENT-UI的后台项目封装组件--查询form的封装
2024-08-31 07:10:24
最近项目打算重构，项目的模块几乎都是以后台查询展示的传统的增删改差模式，所以卑微的我想要自己封装一下查询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传给子组件是传默认值的，
卑微前端，记录自己的项目封装的组件，方便以后自己用，如果有哪里不合理，请各路大神多多指教。
最新文章
- 网页中的<th></th>是什么意思
- 安装zabbix报错configure: error: libcurl library not found
- Symfony2模版引擎使用说明手册
- 如何用js刷新aspxgridviw
- International Conference in 2015
- rpm 与压缩解压缩
- android 安装应用程序apk安装不了
- 使用CInternetSession CHttpFile下载网页链接地址的文件
- Filter设计实现IP地址限制
- codeforce --- 237C
- excel文件后台代码
- svn“Previous operation has not finished; run 'cleanup' if it was interrupted
- Linux下搭建测试环境
- u-boot移植（九）---代码修改---NAND
- C# 中web如何定时同步数据
- cocos2d-x学习资源汇总
- hdu3938（最小生成树，推荐）
- 客户端远程连接linux下mysql数据库授权
- mysql 从数据库中获取多条记录，二维展示数据
- 1115 Counting Nodes in a BST （30 分）