表格字段失去焦点提交数据

这篇博客介绍了如何在前端表格组件中实现推算收入列的双击编辑功能,包括使用`el-table-column`定义列样式,通过`v-show`和`isEdit`控制显示输入框和原始值,以及在`el-input`中设置事件监听和验证正整数的逻辑。当输入不符合正整数条件时,会弹出提示信息。同时,更新收入值时会触发接口调用,将修改后的收入值传给后端。
摘要由CSDN通过智能技术生成
<el-table-column align="center" prop="credit.income"          show-overflow-tooltip
label="推算收入" width="150">
     <template slot-scope="scope" >
         <div @dblclick="changeincome(scope.$index)" style="height: 40px;line-height: 40px;">
             <span v-show="!isEdit">{{scope.row.credit.income}}</span>
             <el-input :ref='"incomeinput"+scope.$index' @blur="incomeblur(scope.$index,scope.row.credit.income)"
                 @keyup.enter.native="$event.target.blur" clearable v-show="isEdit" size="small"
                 v-model="scope.row.credit.income" placeholder="请输入推算收入"
                 @change="updateincome(scope.row.user_profiles.user_id,scope.row.credit.income)"></el-input>
         </div>
     </template>
</el-table-column>
    //调用接口上传修改结果
      updateincome(user_id,income) {
      var newParam={}
  newParam.user_id=user_id
  newParam.income=Number(income)
       var pattern = /^[1-9][0-9]*$|0/  /// 正整数和0的正则表达式
    //   // 不符合正整数时
      if (!pattern.test(newParam.income)) {

                  this.$message({
            type: 'info',
            message: "请输入正整数",          })

        // input 框绑定的内容为空
            return
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值