在ElementUI中如何通过按钮控制输入框的隐藏与显示

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

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

<div style="height:7vh;font-size: 13px">
        <el-row>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addNewRefund">新增</el-button>
          </el-col>
          <el-col :span="10">
            <span v-if="showCreate === 1">日期</span>
            <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>
          </el-col>
          <el-col :span="8">
            <span v-if="showCreate === 1">金额</span>
            <el-input v-if="showCreate === 1" v-model="refundMoney" placeholder="请输入金额" size="small" style="width: 150px;margin-left: 10px" />
          </el-col>
          <el-col :span="2">
            <el-button v-if="showCreate === 1" type="primary" size="small" @click="addSaveNewRefund">保存</el-button>
          </el-col>
        </el-row>
      </div>

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

 this.showCreate = 1

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值