vue之ele的From表单组件的使用与二次封装
From表单组件的使用
<template>
<div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-form-item prop="date">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="ruleForm.date"
style="width: 100%"
value-format="yyyy-MM-dd"
></el-date-picker>
</el-form-item>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input
type="textarea"
v-model="ruleForm.desc"
maxlength="200"
show-word-limit
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">
提交
</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Dashboard",
components: {
},
data() {
return {
ruleForm: {
name: "",
region: "",
date: "",
delivery: false,
type: [],
desc: "",
},
rules: {
name: [
{
required: true, message: "请输入活动名称", trigger: "blur" },
{
min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
region: [
{
required: true, message: "请选择活动区域", trigger: "change" },
],
date: [{
required: true, message: "请选择日期", trigger: "change" }],
type: [
{
required: true, message: "至少选一个活动性质", trigger: "change" },
],
desc: [
{
required: true, message: "请填写活动形式", trigger: "blur" },
{
max: 200, message: "长度最多200字符", trigger: "blur" },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log("确定的数据", this.ruleForm);
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
ele的From表单组件的使用与二次封装 - 提交表单
Form.vue
<template>
<div class="form-wrap">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<template v-for="item in ruleFormconfig">
<!-- <slot :name="name" v-if="item.remote || item.slot"></slot> -->
<el-form-item
v-if="item.type == 'input'"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:ref="item.prop"
>
<el-input
v-model="ruleForm[item.prop]"
:type="item.inputType"
:placeholder="item.placeholder || '请输入'"
></el-input>
</el-form-item>
<el-form-item
v-else-if="item.type == 'select'"
:key="item.prop"
:label="item.label"
:prop="item.prop"
>
<!-- <el-tooltip
effect="dark"
:content="item.tooltip ? item.value : ''"
placement="top"
> -->
<el-select
v-model="ruleForm[item.prop]"
:placeholder="item.placeholder || '请选择'"
:ref="item.prop"
:multiple="item.multiple || false"
:collapse-tags="item.multiple || false"
:filterable="item.filterable"
class="collapse_class"
>
<el-option
v-for="selectItem in item.options"
:key="selectItem.value"
:label="selectItem.label"
:value="selectItem.value"
></el-option>
</el-select>
<!-- </el-tooltip> -->
</el-form-item>
<el-form-item
v-if="item.type == 'date'"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:ref="item.prop"
>
<el-date-picker
:type="item.inputType || 'date'"
:placeholder="item.placeholder || '选择日期'"
v-model="ruleForm[item.prop]"
:value-format="item.format || 'yyyy-MM-dd'"
:clearable="item.clearable || true"
:picker-options="item.pickerOptions"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
</template>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">
提交
</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Form",
props: {
ruleFormconfig: {
type: Array,
default() {
return {
};
},
},
ruleForm: {
type: Object,
default() {
return {
};
},
},
rules: {
type: Object,
default() {
return {
};
},
},
},
components: {
},
data() {
return {
};
},
methods: {
submitForm(formName) {
this.$emit("submitForm", formName);
},
resetForm(formName) {
this.$emit("resetForm", formName);
},
},
};
</script>
<style lang="scss" scoped>
.form-wrap {
}
</style>
使用Form组件
<template>
<div>
Dashboard
<From
:ruleFormconfig="ruleFormconfig"
:ruleForm="ruleForm"
:rules="rules"
@submitForm="submitForm"
@resetForm="resetForm"
ref="form"
>
</From>
<From
:ruleFormconfig="ruleFormconfig2"
:ruleForm="ruleForm2"
:rules="rules2"
@submitForm="submitForm2"
@resetForm="resetForm2"
ref="form2"
>
</From>
</div>
</template>
<script>
import From from "./child/Form";
export default {
name: "Dashboard",
components: {
From,
},
data() {
return {
ruleFormconfig: [
{
label: "购买方",
type: "input",
prop: "name",
},
{
label: "融资金额",
type: "input",
inputType: "number",
prop: "money",
},
{
label: "水果",
type: "select",
prop: "fruits",
options: [
{
label: "苹果",
value: "苹果",
},
{
label: "香蕉",
value: "香蕉",
},
{
label: "菠萝",
value: "菠萝",
},
],
},
{
label: "国家",
type: "select",
prop: "country",
options: [
{
label: "中国",
value: "中国",
},
{
label: "美国",
value: "美国",
},
],
},
{
label: "币种",
type: "select",
prop: "currency",
multiple: true,
filterable: true,
options: [
{
label: "人民币",
value: "CNY",
},
{
label: "美元",
value: "USD",
},
{
label: "港币",
value: "HKD",
},
],
},
{
label: "出书日期",
type: "date",
prop: "startDate",
},
{
label: "结束月份",
type: "date",
prop: "endMonth",
format: "yyyy-MM",
inputType: "month",
},
{
label: "备份日期",
type: "date",
prop: "backupsDate",
pickerOptions: {
},
},
{
label: "取款日期",
type: "date",
prop: "withdrawDate",
inputType: "daterange",
},
],
ruleForm: {
name: "",
money: "",
fruits: "",
country: "",
currency: "",
startDate: "",
endMonth: "",
backupsDate: "",
withdrawDate: [],
},
rules: {
name: [
{
required: true, message: "请输入购买方", trigger: "blur" },
{
min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
money: [{
required: true, message: "请输入融资金额", trigger: "blur" }],
fruits: [{
required: true, message: "请选择水果", trigger: "change" }],
country: [{
required: true, message: "请选择国家", trigger: "change" }],
},
ruleFormconfig2: [
{
label: "水果",
type: "select",
prop: "fruits2",
options: [
{
label: "苹果",
value: "苹果",
},
{
label: "香蕉",
value: "香蕉",
},
{
label: "菠萝",
value: "菠萝",
},
],
},
],
ruleForm2: {
fruits2: "",
},
rules2: {
fruits2: [{
required: true, message: "请选择水果", trigger: "change" }],
},
};
},
created() {
this.disabledDate();
},
methods: {
submitForm(formName) {
this.$refs.form.$refs[formName].validate((valid) => {
if (valid) {
console.log("确定的数据", this.ruleForm);
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs.form.$refs[formName].resetFields();
},
disabledDate() {
let now = new Date();
let monthEndDate = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate()
);
let timeEnd = Date.parse(monthEndDate);
this.ruleFormconfig[7].pickerOptions.disabledDate = (time) =>
time.getTime() > timeEnd;
},
submitForm2(formName) {
this.$refs.form2.$refs[formName].validate((valid) => {
if (valid) {
console.log("确定2的数据", this.ruleForm2);
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm2(formName) {
this.$refs.form2.$refs[formName].resetFields();
},
},
};
</script>
<style lang="scss" scoped>
.collapse_class {
::v-deep .el-tag {
&:first-child {
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
</style>
ele的From表单组件的使用与二次封装 - 查询菜单(查询重置等)
Form.vue
<template>
<div class="form-wrap">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="form-wrap-con"
>
<template v-for="item in ruleFormconfig">
<el-form-item
v-if="item.type == 'input'"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:ref="item.prop"
class="input_item"
>
<el-input
v-model="ruleForm[item.prop]"
:type="item.inputType"
:placeholder="item.placeholder || '请输入'"
></el-input>
</el-form-item>
<el-form-item
v-else-if="item.type == 'select'"
:key="item.prop"
:label="item.label"
:prop="item.prop"
class="input_item"
>
<!-- <el-tooltip
effect="dark"
:content="item.tooltip ? item.value : ''"
placement="top"
> -->
<el-select
v-model="ruleForm[item.prop]"
:placeholder="item.placeholder || '请选择'"
:ref="item.prop"
:multiple="item.multiple || false"
:collapse-tags="item.multiple || false"
:filterable="item.filterable"
class="collapse_class"
>
<el-option
v-for="selectItem in item.options"
:key="selectItem.value"
:label="selectItem.label"
:value="selectItem.value"
></el-option>
</el-select>
<!-- </el-tooltip> -->
</el-form-item>
<el-form-item
v-if="item.type == 'date'"
:key="item.prop"
:label="item.label"
:prop="item.prop"
:ref="item.prop"
class="input_item"
>
<el-date-picker
:type="item.inputType || 'date'"
:placeholder="item.placeholder || '选择日期'"
v-model="ruleForm[item.prop]"
:value-format="item.format || 'yyyy-MM-dd'"
:clearable="item.clearable || true"
:picker-options="item.pickerOptions"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
</template>
<div v-if="btnSlot" class="btnSlot_wrap">
<slot class="btnSlot" name="btnSlotName"></slot>
</div>
<el-form-item v-else>
<el-button type="primary" @click="submitForm('ruleForm')">
提交
</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Form",
props: {
ruleFormconfig: {
type: Array,
default() {
return {
};
},
},
ruleForm: {
type: Object,
default() {
return {
};
},
},
rules: {
type: Object,
default() {
return {
};
},
},
btnSlot: {
type: Boolean,
default: false,
},
},
components: {
},
data() {
return {
};
},
methods: {
submitForm(formName) {
this.$emit("submitForm", formName);
},
resetForm(formName) {
this.$emit("resetForm", formName);
},
},
};
</script>
<style lang="scss" scoped>
.form-wrap {
.form-wrap-con {
display: flex;
flex-wrap: wrap;
position: relative;
.input_item {
width: 25%;
margin-bottom: 15px;
::v-deep .el-input__inner,
::v-deep .el-input--suffix {
height: 34px !important;
line-height: 34px !important;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner,
::v-deep .el-select {
width: 100%;
}
}
.btnSlot_wrap {
position: absolute;
right: 0px;
bottom: -25px;
padding-right: 30px;
}
}
}
</style>
使用Form.vue
<template>
<div class="dashboard">
Dashboard
<From
:ruleFormconfig="ruleFormconfig"
:ruleForm="ruleForm"
ref="form"
:btnSlot="true"
>
<el-button slot="btnSlotName" @click="search">查询</el-button>
<el-button slot="btnSlotName" @click="reset">重置</el-button>
</From>
<From
:ruleFormconfig="ruleFormconfig2"
:ruleForm="ruleForm2"
ref="form2"
:btnSlot="true"
>
<el-button slot="btnSlotName" @click="search2">查询2</el-button>
<el-button slot="btnSlotName" @click="reset2">重置2</el-button>
</From>
</div>
</template>
<script>
import From from "./child/Form";
export default {
name: "Dashboard",
components: {
From,
},
data() {
return {
ruleFormconfig: [
{
label: "购买方",
type: "input",
prop: "name",
},
{
label: "融资金额",
type: "input",
inputType: "number",
prop: "money",
},
{
label: "水果",
type: "select",
prop: "fruits",
options: [
{
label: "苹果",
value: "苹果",
},
{
label: "香蕉",
value: "香蕉",
},
{
label: "菠萝",
value: "菠萝",
},
],
},
{
label: "国家",
type: "select",
prop: "country",
options: [
{
label: "中国",
value: "中国",
},
{
label: "美国",
value: "美国",
},
],
},
{
label: "币种",
type: "select",
prop: "currency",
multiple: true,
filterable: true,
options: [
{
label: "人民币",
value: "CNY",
},
{
label: "美元",
value: "USD",
},
{
label: "港币",
value: "HKD",
},
],
},
{
label: "出书日期",
type: "date",
prop: "startDate",
},
{
label: "结束月份",
type: "date",
prop: "endMonth",
format: "yyyy-MM",
inputType: "month",
},
{
label: "备份日期",
type: "date",
prop: "backupsDate",
pickerOptions: {
},
},
{
label: "取款日期",
type: "date",
prop: "withdrawDate",
inputType: "daterange",
},
],
ruleForm: {
name: "",
money: "",
fruits: "",
country: "",
currency: "",
startDate: "",
endMonth: "",
backupsDate: "",
withdrawDate: [],
},
ruleFormconfig2: [
{
label: "购买方",
type: "input",
prop: "name2",
},
],
ruleForm2: {
name2: "",
},
};
},
created() {
this.disabledDate();
},
methods: {
search() {
this.$refs.form.$refs.ruleForm.validate(() => {
console.log("确定的数据", this.ruleForm);
});
},
reset() {
console.log("重置");
this.$refs.form.$refs.ruleForm.resetFields();
},
search2() {
this.$refs.form2.$refs.ruleForm.validate(() => {
console.log("确定的数据2", this.ruleForm2);
});
},
reset2() {
console.log("重置2");
this.$refs.form2.$refs.ruleForm.resetFields();
},
disabledDate() {
let now = new Date();
let monthEndDate = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate()
);
let timeEnd = Date.parse(monthEndDate);
this.ruleFormconfig[7].pickerOptions.disabledDate = (time) =>
time.getTime() > timeEnd;
},
},
};
</script>
<style lang="scss" scoped>
.dashboard {
.collapse_class {
::v-deep .el-tag {
&:first-child {
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
</style>