Bootstrap Vue-表自定义字段格式化程序调用了两次但未工作

Question

我有一张桌子：

<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" },
],

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

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

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

任何帮助或清除将不胜感激。

Answer 1

您需要返回一个数组，可以使用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]);
    }
  }
});

html prettyprint-override"><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>