这样的功能在后台系统中经常碰见 左边是一个输入框 右边是一个按钮
我这里使用element 组件书写的 当然左边也可能是 一个下拉框 或者是一个switch 开关
当然 在开发阶段 不用组件化开发 但是开发完之后呢 要更改功能 一个一个页面改着太麻烦了
那么如果不是一个组件 那么维护起来就有点麻烦了
根据父组件传来的数据进行判断显示那种表单组件
我们首先先来完成表单子组件
// 使用 v-if 判断父组件传来的参数 类型 选择显示那种组件
<el-form :inline="inLine" :model="form" ref="form" label-width="100px">
<el-form-item v-for="item in formLabel" :key="item.model">
<el-input v-model="form[item.model]" :placeholder="'请输入' + item.label" v-if="!item.type"></el-input>
<el-select v-model="form[item.model]" placeholder="请选择" v-if="item.type == 'select'">
<el-option v-for="(subItem, idx) in item.opts" :key="idx" :label="item.label" :value="subItem.value"></el-option>
</el-select>
<el-switch v-model="form[item.model]" v-if="item.type == 'switch'"></el-switch>
</el-form-item>
<el-form-item>
<slot></slot> // 插槽 用来 接受父组件传来的自定义内容 如上面的 表单 右边的按钮
</el-form-item>
</el-form>
export default {
props: {
form: Object, // 用来存放 用户输入的数据
formLabel: Array, //存放每个表单前的文字描述
inLine: Boolean // 判断 表单是横向排列 还是竖向排列 这样的话 默认是 false
}
}
然后就是父组件 我把子组件起个名字 叫做 common-form
<common-form inLine :formLabel="formLabel" :form="form">
<el-button type="primary">搜索</el-button> // 插槽的方式传给子组件
</common-form>
searchForm: {
form: '' // 存放用户输入的数据
},
formLabel: [
{
model: 'keyword',
label: '',
options: [] // 如果是select 表单类型 用来存放 options中的 value值
}
]