通过外键搜索数据并显示在 bootstrap-vue 表中

Question

基于这个How to render custom data in Bootstrap-Vue Table component?我创建了这个代码：

assignDocuments(id) {
        const documents = this.$store.state.documentList.filter(e => e.user.idUser === id);
        console.log(documents);
        let i;
        for(i=0; i < documents.length;i++) {
          return documents[i] ? `${documents[i].filename}` : 'loading...';
        }

      }

但它不像我需要的那样工作......我需要显示所有对象的名称（文件名）（在这种情况下，我在 documents中有 2 个对象> 数组）在数组中，但现在 b-table 中只显示第一个对象的名称。

编辑：

B表代码：

<b-table ref="table" small striped hover :items="$store.state.userList" :fields="fields" head-variant="dark">
     <template v-slot:cell(indexNumber)="row">
       {{ row.item.indexNumber}}
     </template>

     <template v-slot:cell(name)="row">
       {{ row.item.name}}
     </template>

     <template v-slot:cell(surname)="row">
       {{ row.item.surname}}
     </template>

     <template v-slot:cell(specialization.specName)="row">
       {{ row.item.specialization.specName}}
     </template>

     <template v-slot:cell(yearbook)="row">
       {{ row.item.yearBook.startYear }}<b>/</b>{{ row.item.yearBook.endYear }}
     </template>

     <template v-slot:cell(details)="row">
       <b-button size="sm" @click="row.toggleDetails" class="mr-2">
         {{row.detailsShowing ? 'Ukryj' : 'Pokaż'}} Szczegóły
       </b-button>
     </template>
</b-table>

字段：

fields:[
            {
              key: 'indexNumber',
              label: 'Numer indeksu'
            },
            {
              key: 'name',
              label: 'Imię'
            },
            {
              key: 'surname',
              label: 'Nazwisko',
            },
            {
              key: 'specialization.specName',
              label: 'Kierunek',
            },
            {
              key: 'yearBook',
              label: 'Rocznik',
            },
            {
              key: 'idUser',
              label: 'Documents',
              formatter: 'assignDocuments'
            },
            {
              key: 'details',
              label: 'Szczegóły',
            },
          ],

Answer 1

这是因为在您的函数中，您在循环的第一次迭代之后是 returning。您需要获取所有文件名，然后返回：

在您分享的示例中，他们只分配了一个值；名字/姓氏作为字符串。在您的情况下，您似乎有多个文档可能与表中的单行相关。

尝试更改代码以返回所有文档：

assignDocuments(id) {
  const documents = this.$store.state.documentList.filter(e => e.user.idUser === id);
  console.log(documents);

  let fileNames = [];

  // Get the file name for each doc and put into our array
  documents.forEach(elem => fileNames.push(elem.filename));

  // Return the file names as a concatenated string
  return filesNames.length > 0 ? fileNames.join() : 'loading...';

}

编辑：

根据您的评论，我已更新，以便您稍后可以将其放置在按钮中！您可以做的是利用相同的功能，然后根据您为该行拥有的文档动态创建按钮。

<template>
  <div>
    <b-table :items="someTableItems" :fields="fields">
      <button v-for="(doc, index) in assignDocuments(someIdHere)" 
              :key="`docBtn-${index}`"
              :class="doc.cssClassObject">
         {{ doc.filename }}
      </button>
    </b-table>
  </div>
</template>

assignDocuments(id) {
  const documents = this.$store.state.documentList.filter(e => e.user.idUser === id);
  console.log(documents);

  let files= [];

  // Get the file name for each doc and put into our array
  documents.forEach(elem => {
    const isAccepted = elem.status === "accepted";

    files.push({
      status: elem.status, 
      filename: elem.filename, 
      cssClassObject : { accepted: isAccepted, rejected: !isAccepted }
    });
  });

  // Return the files as an array
  return files.length > 0 ? files : 'loading...';

}