如何高效处理el-table的span-method合并行，避免用户输入导致的重复渲染？

<template>
  <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%;">
    <el-table-column label="ID" prop="id" width="180"></el-table-column>
    <el-table-column label="Name" prop="name"></el-table-column>
    <el-table-column label="Amount">
      <template #default="{row}">
        <el-input v-model="row.amount" @blur="updateAmount(row)"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, watch } from 'vue';
import { debounce } from 'lodash';

const tableData = ref([
  { id: 1, name: 'A', amount: 10 },
  { id: 2, name: 'B', amount: 20 },
]);

const updateAmount = debounce((row) => {
  // 更新tableData，触发el-table重新渲染，但span-method不会被立即调用
  row.amount = parseFloat(row.amount) || 0; // 处理非数字输入
}, 300); // 300ms 防抖时间

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // ... (你的span-method逻辑) ...
};
</script>