element-plus Table 表格自定义列模板使用及问题

想要在表格中自定义列内容，是通过在el-table-column中使用slot实现的。

比如我现在传入表格的列内容需要格式化字符串再输出，就需要用到这个特性。

首先上一段代码，3行两列的数据，我需要在name显示的数据前都加个a字符，为了测试这个过程，我在showname这个函数内打印下调用编号。

<template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="date" width="180"/>
    <el-table-column label="Name" width="180">
      <template #default="scope">
         <span v-text="showname(scope.row.name)"></span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
let cntname=0;
function showname(name){
   cntname++
   console.log("name" + cntname + ":" +name);
   return "a" + name;
}
const tableData = [
  {date: '1',name: 'a',},
  {date: '2',name: 'b',},
  {date: '3',name: 'c',},
]
</script>

按照设想，showname应该调用3次。但是运行后打印结果是这样，调用了7次。

经过增加数据的列在测试。我得出了结论：每个自定义的列内，会先来一行表头，所以scope.row内没有该列数据，第一次调用会进来一个未定义。然后数据初始化时，table数据会重复刷一次！我突然想起来以前用el-image时好像遇到过，el-image在请求图像地址时候发了两次，后来用了原生的img。

所以需要注意的就是如果你有调用函数来处理自定义列，一定要注意数据未定义判断，否则就会运行函数出问题。