在ElementUI通过按钮控制输入框的隐藏和显示

点击此按钮会出现两个输入框

 当点击完新增后会出现两个输入框及一个按钮，解决此方案思路比较简单：就是设置一个属性值，用v-if进行绑定，在什么情况下需要显示就需要设置v-if绑定的值等于需要显示的值

1.  
   <div style="height:7vh;font-size: 13px">
2.  
   <el-row>
3.  
   <el-col :span="2">
4.  
   <el-button type="primary" icon="el-icon-plus" size="small" @click="addNewRefund">新增</el-button>
5.  
   </el-col>
6.  
   <el-col :span="10">
7.  
   <span v-if="showCreate === 1">日期</span>
8.  
   <el-date-picker v-if="showCreate === 1" v-model="refundDate" type="date" size="small" placeholder="请选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="margin-left: 10px;width: 150px"></el-date-picker>
9.  
   </el-col>
10.  
    <el-col :span="8">
11.  
    <span v-if="showCreate === 1">金额</span>
12.  
    <el-input v-if="showCreate === 1" v-model="refundMoney" placeholder="请输入金额" size="small" style="width: 150px;margin-left: 10px" />
13.  
    </el-col>
14.  
    <el-col :span="2">
15.  
    <el-button v-if="showCreate === 1" type="primary" size="small" @click="addSaveNewRefund">保存</el-button>
16.  
    </el-col>
17.  
    </el-row>
18.  
    </div>

上面的showCreate的默认值可以任意设置，当点击了新增后

 this.showCreate = 1

通过上述解决方案即可完成此需求

这篇好文章是转载于：学新通技术网