<template class="">
|
<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-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">
|
|
<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'],
|
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>
|
