vue-《el-table》表格＜el-input＞输入根据@input实时计算

<el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期" prop="date" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="实付" prop="sf" />
    <el-table-column label="应付" prop="yf">
      <template slot-scope="scope">
        <el-input type="number" v-model="scope.row.yf" :max="scope.row.sf" @input="e => yfChange(e, scope.$index)" placeholder="请输入"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="A价格"
      width="180">
      <template slot-scope="scope">
        <el-input type="number" v-model="scope.row.priceA" @input="e => paChange(e, scope.$index)" placeholder="请输入"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="B价格"
      width="180">
      <template slot-scope="scope">
        <span>{
   
   { scope.row.priceB }}</span>
      </template>
    </el-table-column>
  </el-table>

data(){

    return {
​
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sf: 120,
          yf: null,
          priceA: null,
          priceB: null
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sf: 60,
          yf: 30,
          priceA: null,
          priceB: null
        }],
​
    }
},
methods:{
    yfChange(e,index){
        let data = JSON.parse(JSON.stringify(this.tableData))
        let sf =  data[index].sf
        let priceA = data[index].priceA
        e = e > sf ? e = sf : e
        data[index].yf = e
        if(priceA) {
          data[index].priceB = e - priceA
        }
        this.tableData = data
      },
     paChange(e,index) {
        let data = JSON.parse(JSON.stringify(this.tableData))
        let yf = data[index].yf
        if(yf) {
          data[index].priceB = yf - e
        }
        this.tableData = data
      },
}

效果：

如果应付有值，输入A价格，可自动算出B价格，如果A价格大于应付，则等于应付

如果A价格有值，输入应付，可自动算出B价格，如果应付大于实付，则等于实付