使用 v-for 引导 vueJS 表

Question

所以在我的项目中我遇到了一些问题，

所以我想做的是，我在这个对象中有一个用户（对象）列表，我有一个属性

teamId

（从api端点调用），我必须将它们短接在多个表中（引导程序） vue b-table），他们每个人都是一个团队。 所以我正在这样做，我有一个函数可以查看整个用户列表并仅在这个

teamId

中返回用户，然后在我的模板中我正在执行boostrap表的v-for，但该表需要

:items="items" 

并且我无法将函数 return 放入此

:items="items" exemple: :items="myfunction(teamId)"

中，所以我迷失了，因为每次 v-for （带有 teamId 参数）迭代时我都必须创建一个新的

items

数组 我正在使用 b-table 因为我需要一个易于选择的表

大家有什么建议吗？ 项目在 vueJS 2 中

Answer 1

            axiosUserTeam(ID) {
            this.teamItems = [];
            axios.get(
                this.$store.state.settings.API_URL + 'api/Scenarios/' + this.$route.params.scenarioid, {
                    withCredentials: true,
                }
            ).then((response) => {
                if(response.status == 200) {
                    this.usersInScenario = response.data.users;
                        console.log(this.teamFullList[TEAM].teamId) //eslint-disable-line 
                        for(let USER in this.usersInScenario) {
                            const current = this.$store.state.users.find(({userId}) => userId == this.usersInScenario[USER].userId)
                            if(this.usersInScenario[USER].teamId == ID) {
                                this.teamItems.push(
                                {userId: current.userId,
                                    Company: current.company,
                                    teamId: this.usersInScenario[USER].teamId,
                                    first_name: current.firstName,
                                    last_name: current.lastName}
                                )
                            }
                        }
                    console.log(this.teamItems); //eslint-disable-line
                }
            })

        },

这是 v-for :

<b-card
                        v-for="(TEAM, INDEX) in teamFullList"
                        :title="TEAM.name"
                        :key="TEAM.teamId"
                        header-tag="header" 
                        footer-tag="footer"
                        style="margin-bottom: 10px;"
                        >
                            <template #header>
                            <div class="d-flex">
                                <div class="d-flex align-items-center w-50">
                                    <span style="margin-right: 5px;" class="material-icons">group_add</span>
                                    <b-button v-if="INDEX == 0">Create a team </b-button>
                                </div>
                                <div class="d-flex align-items-center w-50 justify-content-end">
                                    <b-button @click.prevent="delete_team(TEAM.teamId)" style="display: flex; align-items: center;">Delete {{TEAM.name}} <span style="margin-left: 5px;" class="material-icons">delete</span></b-button>
                                </div>
                            </div>

                            </template>

                            <b-table
                            :items="axiosUserTeam(TEAM.teamId)" 
                            :fields="teamfields"
                            selectable
                            @row-selected="onTeamSelected"
                            select-mode="multi"
                            class="text-md-left"
                            >
                            <template #cell(selected)="{ rowSelected }">
                                <template v-if="rowSelected">
                                <span aria-hidden="true">&check;</span>
                                <span class="sr-only">Selected</span>
                                </template>
                                <template v-else>
                                <span aria-hidden="true">&nbsp;</span>
                                <span class="sr-only">Not selected</span>
                                </template>
                            </template></b-table>

                            <template #footer>
                                <em>STATS</em>
                            </template>

                            <div class="d-flex text-md-right">
                                <b-button v-if="userInTeamSelected.length < 1" class="ml-1" size="sm" disabled>Remove users</b-button>
                                <b-button @click="moveSelectedUser('team', null)" v-else class="ml-1" size="sm">Remove users</b-button>
                            </div>
                        </b-card>

Answer 2

如果您只想要一个具有 vue bootstrap table 外观和感觉的简单表格，您可以在

class='table b-table table-striped table-hover'

元素中添加类

<table class='table b-table table-striped table-hover'>

。

<table class='table b-table table-striped table-hover'>
  <thead>
    <tr>
      <th>Answer Option</th>
      <th>Response Total</th>
      <th>Response Percentage</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Option 1</td>
      <td>25</td>
      <td>50%</td>
    </tr>
    <tr>
      <td>Option 2</td>
      <td>15</td>
      <td>30%</td>
    </tr>
    <tr>
      <td>Option 3</td>
      <td>10</td>
      <td>20%</td>
    </tr>
  </tbody>
</table>