Bootstrap Vue b-table自定义字段formatter调用两次且功能不生效问题

1. teacherEmails字段formatter逻辑失效修复 #

你现有代码存在以下几个错误：

• forEach方法的返回值不会穿透到外层的teacherEmailTCellFormat函数，forEach本身返回undefined，你写的return只作用于forEach的回调函数，没有实际效果
• 代码中引用的each变量未定义，遍历的参数名是item，应该使用item取值
• 你的teacherEmails数组的每个元素是对象（结构为{0: "sample1"}），不能直接用下标[0]取属性值，需要先提取对象的属性值

正确的formatter实现参考：

teacherEmailTCellFormat(value) {
  // value为传入的teacherEmails数组
  return value.map(item => {
    // 提取每个对象的第一个属性值作为邮箱内容
    return Object.values(item)[0]
  }).join(', ') // 多个邮箱用逗号分隔，可自定义分隔符
}

如果可以调整数据源结构，建议把teacherEmails改成和teacherIds一致的普通字符串数组，不需要额外做Object.values处理，代码更简洁：

// 优化后的数据源结构
teacherEmails: ["sample1", "sample2", "sample3"]
// 对应的formatter可以简化为
teacherEmailTCellFormat(value) {
  return value.join(', ')
}

2. formatter被调用两次的原因说明 #

这是Bootstrap Vue b-table的正常行为，触发原因主要为：

• b-table在首次渲染前会做一次预计算，用来确定列宽、排序基线等基础布局参数，会触发一次formatter调用
• 正式渲染单元格内容时会第二次调用formatter
  如果你的组件存在父组件状态更新、表格有排序/筛选/分页功能触发重渲染，调用次数还会更多。只要formatter是纯函数（相同输入永远返回相同输出），多次调用不会影响渲染结果。如果需要优化性能可以做如下处理：
• 给b-table绑定primary-key属性，指定唯一主键：<b-table striped hover :items="coursesArray" :fields="fields" primary-key="id"></b-table>，减少不必要的重渲染
• 对formatter的计算结果做缓存，避免重复计算相同输入的返回值

内容的提问来源于stack exchange，提问作者DemiA