<template >
|
<div>
|
<el-form
|
size="mini"
|
:inline="true"
|
style="padding: 30rpx 30rpx 10rpx 30rpx"
|
:model="from"
|
class="row demo-form-inline col-xs-12"
|
>
|
<el-row :gutter="10">
|
<el-form-item
|
style="width: 30%"
|
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-input
|
v-if="item.type === 'number'"
|
min="1"
|
type="number"
|
v-model.number="item.value"
|
:placeholder="item.label"
|
></el-input>
|
<el-select
|
v-else-if="item.type === 'select'"
|
v-model="item.value"
|
:placeholder="item.label"
|
>
|
<el-option
|
v-for="(option, optionIndex) in item.options"
|
:key="optionIndex"
|
:label="option.label"
|
:value="option.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 其他表单项省略 -->
|
<!-- <el-form-item style="display:block; "> -->
|
<view class="flex flex-center Formbtn">
|
<el-button
|
style="background-color: #244a7b; color: #fff"
|
size="mini"
|
@click="handleSubmit"
|
>检索</el-button
|
>
|
<el-button type="info" plain size="mini" @click="handleReset"
|
>重置</el-button
|
>
|
</view>
|
<!-- </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%;
|
}
|
</style>
|
