<template>
|
<div>
|
<el-form size="mini" :inline="true" style="padding: 0px 10px;
|
" :model="from" class="row demo-form-inline col-xs-12">
|
<el-row :gutter="10">
|
<el-form-item style="width: 33%" v-for="(item, i) in from.from" :key="i" :label="item.label">
|
<el-input v-if="item.type === 'input'" v-model="item.value" :placeholder="item.label"></el-input>
|
</el-form-item>
|
<!-- 其他表单项省略 -->
|
<!-- <el-form-item style="display:block; "> -->
|
<div class="flex flex-center Formbtn">
|
<el-button size="mini" @click="handleSubmit">搜索</el-button>
|
<el-button size="mini" @click="handleReset">重置</el-button>
|
</div>
|
<!-- </el-form-item> -->
|
</el-row>
|
</el-form>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: ["from"],
|
mounted() {
|
},
|
methods: {
|
handleSubmit() {
|
this.$message({
|
message: "查询成功",
|
type: "success",
|
});
|
const result = this.from.from.reduce((obj, item) => {
|
obj[item.name] = item.value;
|
return obj;
|
}, {});
|
// 提交逻辑
|
this.$emit("submit", result); // 发送 submit 事件，并将表单数据作为参数传递给父组件
|
},
|
handleReset() {
|
this.from.from.forEach((item) => {
|
item.value = "";
|
});
|
// 重置逻辑
|
this.$emit('reset') // 发送 reset 事件给父组件
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.el-form--inline .el-form-item {
|
margin-right: 0;
|
}
|
|
::v-deep .el-form-item__content {
|
width: 80%;
|
}
|
|
::v-deep .el-form-item__content div {
|
width: 100%;
|
}
|
|
::v-deep.el-form--inline .el-form-item__label {
|
font-family: Source Han Sans;
|
font-size: 14px;
|
font-weight: bold;
|
color: #2C2C2C;
|
}
|
</style>
|
