效果如下,后面table等内容可以看上一篇:
由于本项目中多处需要使用表单,在这里做一些简单的封装
Form表单封装
Element-ui中的el-form需要在el-form组件内绑定存入数据的对象,同时每个el-form-item组件有不同的种类,输入框,单选框,复选框等,因此要实现封装就需要判断每个属性的类型,内容大致如下:
<el-form ref="form" label-width="100px" :model="formData" :inline="false">
<el-form-item
v-for="(item, index) in formLabel"
:key="index"
:label="item.label"
>
<el-input
v-if="item.type === 'input'"
:placeholder="'请输入' + item.label"
v-model="formData[item.model]"
>
</el-input>
<el-select
v-if="item.type === 'select'"
:placeholder="'请选择' + item.label"
v-model="formData[item.model]"
>
<el-option
v-for="(option, index) in item.option"
:key