javascript - el-table 用span-method合并行如何只在初次渲染时调用？

Question

el-table 用span-method合并行，表格中有一列数据是用户输入的，表格已经渲染完成，但是每次输入数据的时候，都会执行span-method，重新计算合并逻辑，有什么办法能只在初次渲染时执行span-method，后面输入数据不执行span-method

<template>  <div>    <el-table      :data="tableData"      :span-method="objectSpanMethod"      border      style="width: 100%; margin-top: 20px"    >      <el-table-column prop="id" label="ID" width="180" />      <el-table-column prop="name" label="Name" />      <el-table-column prop="amount1" label="Amount 1" />      <el-table-column prop="amount2" label="Amount 2" />      <el-table-column prop="amount3" label="Amount 3" >      <template #default="scope">        <el-input          v-model="scope.row.inputVal"        ></el-input>      </template>      </el-table-column>    </el-table>  </div></template><script lang="ts" setup>import type { TableColumnCtx } from 'element-plus'interface User {  id: string  name: string  amount1: string  amount2: string  amount3: string}interface SpanMethodProps {  row: User  column: TableColumnCtx<User>  rowIndex: number  columnIndex: number}const objectSpanMethod = ({  row,  column,  rowIndex,  columnIndex,}: SpanMethodProps) => {  console.log('触发 objectSpanMethod')  if (columnIndex === 0) {    if (rowIndex % 2 === 0) {      return {        rowspan: 2,        colspan: 1,      }    } else {      return {        rowspan: 0,        colspan: 0,      }    }  }}const tableData: User[] = [  {    id: '12987122',    name: 'Tom',    amount1: '234',    amount2: '3.2',    amount3: '',  },  {    id: '12987123',    name: 'Tom',    amount1: '165',    amount2: '4.43',    amount3: '',  },  {    id: '12987124',    name: 'Tom',    amount1: '324',    amount2: '1.9',    amount3: '',  },  {    id: '12987125',    name: 'Tom',    amount1: '621',    amount2: '2.2',    amount3: '',  },  {    id: '12987126',    name: 'Tom',    amount1: '539',    amount2: '4.1',    amount3: '',  },]</script>

以上是个例子，可以打开下面演示地址试试，打开控制台，可以看到每次填数据都会输出
演示地址

Answer 1

没办法什么好办法，因为你要驱动视图渲染。

除非你改成非受控的输入框，或者把 el-input 绑定的值从 scope.row.input 改成其他的一个新变量。但是最终你都要去更新总计栏中的值，或者需要额外收集用户收入的新数据。

所以不如旧直接给 span-method 套一个 debounce/throttle 延迟执行就好了。