vue 请问怎么递归处理这个数据，感谢哥哥们解答 ？

Question

表格里数据有 n 多条，如果发生额和第一条数据的需收金额相等，就全部被第一条数据拆分，不再向下递归，否则就递归拆分剩余金额。

table 表格数据：

detailData: [
    {
      feeType: '租金',
      amountReceivableIncludTax: 55,
      billStatus: 22,
      needCharge: 300
    },
    {
      feeType: '租金',
      amountReceivableIncludTax: 99,
      billStatus: 1,
      needCharge: 200
    },
    {
      feeType: '租金',
      amountReceivableIncludTax: 9,
      billStatus: 1,
      needCharge: 100
    }
  ],

表格 columns：

columns: [
    {
      title: '费用类型',
      align: 'center',
      dataIndex: 'feeType'
    },
    {
      title: '应收金额',
      align: 'center',
      dataIndex: 'amountReceivableIncludTax'
    },
    {
      title: '已结清',
      align: 'center',
      dataIndex: 'billStatus'
    },
    {
      title: '需收金额',
      align: 'center',
      dataIndex: 'needCharge'
    },
    {
      title: '流水拆分匹配',
      align: 'center',
      dataIndex: 'flowMatchData',
      scopedSlots: { customRender: 'flowMatchData' }
    }
  ],

页面表格

<a-table bordered :data-source="detailData" :columns="columns">
      <!-- 流水拆分匹配 -->
      <template slot="flowMatchData" slot-scope="text, record, index">
        <a-input
          v-model="record.flowMatchData"
          placeholder="0.00"
          @blur="handleFlowMatch(record, index)"
        />
      </template>
</a-table>

Answer 1

看到@hfhan 给答案了，不过我还补充完整了，加上了校验，与列表的计算。

<div class="form-box">
  <a-input-number
    v-model.number="flowMatchData"
    :max="maxFlowMatchData"
  ></a-input-number>
</div>

<a-table bordered :data-source="detailData" :columns="columns">
  <!-- 流水拆分匹配 -->
  <template slot="flowMatchData" slot-scope="text, record, index">
    <a-input-number
      v-model="record.flowMatchData"
      placeholder="0.00"
      :max="record.maxFlowMatchData"
      @blur="handleFlowMatch(record, index)"
    />
  </template>
</a-table>

computed: {
    // 变化就计算
    maxFlowMatchData() {
      return this.detailData.reduce((pv, cv) => {
        return pv + (cv.needCharge || 0);
      }, 0);
    },
  },
  watch: {
    // 监听变化，变化后计算
    flowMatchData() {
      this.handleCalc(this.flowMatchData, 0);
    },
  },
  methods: {
    handleFlowMatch(r, idx) {
      // 线上计算已有量
      let currentV = 0;
      for (let i = 0; i <= idx; i++) {
        currentV += this.detailData[i].flowMatchData;
      }
      // 向下计算余量
      const surplusV = this.flowMatchData - currentV;
      this.handleCalc(surplusV, idx + 1);
    },
    // flowMatchData 输入的发生额
    handleCalc(flowMatchData, index = 0) {
      // 
      let _flowMatchData = flowMatchData;
      // 循环计算一下
      this.detailData.forEach((item, i) => {
        // 如果大雨 i的 就忽略 向下计算 上方的忽略
        if (index > i) {
          return;
        }
        let v = _flowMatchData;
        // 计算是否计算完毕
        if (_flowMatchData >= item.needCharge) {
          v = item.needCharge;
          _flowMatchData -= item.needCharge;
        } else {
          _flowMatchData = 0;
        }
        // 写入最大与当前
        this.$set(item, "flowMatchData", v);
        this.$set(item, "maxFlowMatchData", v);
      });
    },
  },

Answer 2

watch: {
    price(val){
        let index = 0
        let item = this.detailData[index]
        while(val > 0 && item){
            let num = Math.min(val, item.needCharge || 0)
            item.flowMatchData = num
            val -= num
            item = this.detailData[++index]
        }
    }
}