在el-table中使用input联动计算

效果图:在这里插入图片描述el-table中 嵌套 input实现 输入前两个数字后 自动计算差值 change,blur,input,focus
这4种方法 这边推荐input
效果很好 传入的scope.row 能够实时根据输入的做出计算
change blur 总是有问题 就像传进去的是oldvalue不是newvalue一样
![在这里插入图片描述](https://img-blog.csdnimg.cn/bd865f462b4f4221b047034420cd18bf.png
用input 然后方法里判断下要用的值是否为NaN,undefined。
就可以正常满足需求,当输入数字的时候,会一直跟随计算。

  										<el-table
                                        style="width: 100%;margin-top:20px" stripe
                                        :header-cell-style="{color:'#fff',
                                        fontFamily:'FZZhengHeiS-EB-GB'
                                        ,fontWeight:400}"
                                        :data="tableData"
                                        highlight-current-row
                                        ref="table1"    >
                                        <!-- <el-table-column
                                        align="center"
                                        type="index"
                                        label=""
                                        width='90'>
                                        </el-table-column> -->
                                        <el-table-column
                                        align="center"
                                        label=""
                                        prop='name'
                                        width="">
                                        <!-- <template  slot-scope="scope"  >
                                        <el-input class="center" type="text"  	
                                        oninput="value=value.replace(/[^0-9.]/g,'')" 
                                        placeholder="请输入" v-model="scope.row.v" />
                                        </template> -->
                                        </el-table-column>
                                        <el-table-column
                                        align="center"
                                        label="上月表记值"
                                        prop='p'
                                        width="">
                                        <template  slot-scope="scope"  >
                                        <el-input class="center" type="text" 
                                         @input="changNum(scope.row)"   
                                         oninput="value=value.replace(/[^0-9.]/g,'')" 
                                         placeholder="请输入" v-model="scope.row.v" />
                                        </template>
                                        </el-table-column>
                                        <el-table-column
                                        align="center"
                                        label="当月表记值"
                                        prop='v'
                                        width="">
                                        <template  slot-scope="scope"  >
                                        <el-input class="center" type="text" 
                                          @input="changNum(scope.row)"     
                                         oninput="value=value.replace(/[^0-9.]/g,'')"
                                          placeholder="请输入" v-model="scope.row.p" />
                                        </template>
                                        </el-table-column>    
                                        <el-table-column
                                        align="center"
                                        label="差值"
                                        prop='d'
                                        width="">
                                        <!-- <template  slot-scope="scope"  >
                                             {{ scope.row.p  - scope.row.v  }}
                                        </template> -->
                                        </el-table-column>    
                                    </el-table>
                                     changNum(value){
            			    if(  value.v != NaN && value.v != undefined && value.v != '' && 
               				 value.p != NaN && value.p != undefined && value.p != '' ){
                 			  value.d = value.v - value.p 
               					 }
           					 },
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值