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の価格が自動的に計算されます。買掛金が実際の支払額より大きい場合、実際の支払額と同じになります。