Bootstrap Vue - table 自定义字段格式化程序调用了两次但无法正常工作

Question

我有一个 table:

<b-table striped hover :items="coursesArray" :fields="fields"></b-table>

数据来自

coursesArray: [
    {
        id: "1",
        name: "foo",
        teacherEmails: [{ 0: "sample1" }, { 1: "sample2" }, { 2: "sample3" }],
        teacherIds: ["A1", "A2", "A3"],
    },
],

字段是：

fields: [
    { key: "id", label: "Course ID" },
    { key: "name", label: "Course Name" },
    {
        key: "teacherEmails",
        label: "Teacher Email",
        formatter: "teacherEmailTCellFormat",
    },
    { key: "teacherIds", label: "Teacher ID" },
],

这就是它在没有格式化程序的情况下的呈现方式。

因此，我在字段中添加了自定义格式化程序以删除方括号和大括号。
我遇到的第一个问题是将值循环到 return teacherEmails 中的所有项目不起作用。

teacherEmailTCellFormat(value) {
    console.log(value)
    value.forEach(item => {
        return each[0]
    }
}

第二个问题，我不明白为什么会这样，如果我记录传递给格式化程序的值，很明显格式化程序函数被调用了两次。

如有任何帮助或许可，我们将不胜感激。

Answer 1

您需要 return 一个数组，您可以使用 Array#map:

new Vue({
  el:"#app",
  data: () => ({
    fields: [
      { key: "id", label: "Course ID" },
      { key: "name", label: "Course Name" },
      { key: "teacherEmails", label: "Teacher Email", formatter: "teacherEmailTCellFormat" },
      { key: "teacherIds", label: "Teacher ID" },
    ],
    coursesArray: [
      {
        id: "1",
        name: "foo",
        teacherEmails: [{ 0: "sample1" }, { 1: "sample2" }, { 2: "sample3" }],
        teacherIds: ["A1", "A2", "A3"],
      }
    ]
  }),
  methods: { 
    teacherEmailTCellFormat(value) {
      return value.map((item, i) => item[i]);
    }
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table striped hover :items="coursesArray" :fields="fields"></b-table>
</div>

注意：我假设键表示数组中项目的索引，但您可以根据需要更改映射。主要问题是 return 数组。

Bootstrap Vue - table 自定义字段格式化程序调用了两次但无法正常工作

Bootstrap Vue - table custom field formatter called twice but not working

vue.js

bootstrap-vue