效果图: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
}
},