input输入框实时监测

---

一、vue部分

<!-- 表格数据：tableData -->
<!-- input类型：type="number" -->
<!-- input绑定的变量：ratio -->
<!-- input内容监测：@input.native -->
<!-- 实时响应方法：eventDisposalRangeChange(scope.row) -->
<el-table :data="tableData"  max-height="300">
	<el-table-column label="测试" align="center">
		<template slot-scope="scope" >
   	 		<el-input
        		ref="refNumber"
          	 	type="number"
            	v-model="scope.row.ratio"
           	 	controls-position="right"
           	 	min = 0
            	@input.native="eventDisposalRangeChange(scope.row,$event)" 
            >
    		</el-input>
		</template>
	</el-table-column>
</el-table>

二、js部分

export default {
    name: "",
    data() {
		return {
			tableData:[
				{
					sum:100,
					value:97,
					ratio:0.97
				}		
			]
		}
	},
    methods: {
		/**
		* 实时响应方法
		*/
		eventDisposalRangeChange(row,event) {
			row.value= (row.sum*row.ratio).toFixed(2);
			event.target.min = 0;//控制最小值
            row.ratio = '0.00';
            row.energy = '0.00';
		},
	}
},