最近有个需求需要通过el-option选项来控制el-form-item的展示，比如说当el-option选项选会员时，需要输入手机号，选订单号时，需要输入订单号。
思路是通过v-model绑定一个data，通过数据双向绑定动态控制data的值，v-if实现判断。
用element组件需要注意，设置el-option的value时，element默认设置的是字符串类型，我一开始一直以为是数字。。。。折腾了好久，对数据监听啥的。。。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <el-form :model="form" label-width="80px" class="form">
<el-form-item label="查询方式:" class="form-item" >
<el-select v-model="form.way" placeholder="按会员查" style="height: 32px;width: 170px;">
<el-option label="按会员查" value="1" />
<el-option label="按订单查" value="2" />
</el-select>
</el-form-item>
<el-form-item v-if="form.way==='1'" label="手机号:" class="form-item">
<el-input v-model="form.phone" placeholder="请输入手机号" style="height: 32px;width: 170px;" />
</el-form-item>
<el-form-item v-if="form.way==='2'" label="订单号:" class="form-item">
<el-input v-model="form.order" placeholder="请输入订单号" style="height: 32px;width: 170px;" />
</el-form-item>
</el-form>
|
