element-plus ^2.7.2 table组件 formatter 调用多次，如何解决？

Question

代码使用的官方示例代码，只保留了1条数据，并对其中一个字段使用了:formatter

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="date" label="Date" width="150" />
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="state" label="State" width="120" />
    <el-table-column prop="city" label="City" width="120" />
    <el-table-column prop="address" label="Address" width="600" :formatter="handFormatter"/>
    <el-table-column prop="zip" label="Zip" width="120" />
  </el-table>
</template>

<script lang="ts" setup>

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
  }
]

const handFormatter = (row: any) => {
  console.log(row)
  return "aaa"
}
</script>

执行结果

问题说明：刷新页面，1条数据打印了4次。
备注问题：如果列表数据是来自接口，在不刷新界面的情况下，多次调用接口，数据格式化次数是累加的~~~

Answer 1

问题内容中贴的业务代码已经是全部的代码了吗？

ele+ 的表格组件会有多执行一次 formatter 的问题，也就是 log 两次。但是你现在是 log 了四次，所以看起来是因为后续又有操作过 tableData 导致的。

• [Component] URGENT PERFORMANCE - Running function twice (duplicate) · Issue #9832 · element-plus/element-plus

最好能够提供更加完整一点的代码，和你想要使用 formatter 实现什么业务。看起来是你期望在 formatter 函数内做一些其他操作 tableData 的操作？