Question

我正在创建一个friends组件，该组件根据端点的响应列出用户的朋友。

我想将响应呈现到表的行中，作为此操作的一部分，我想使用引导条带表类

https://getbootstrap.com/docs/4.0/content/tables/#striped-rows

当我执行v-时，表格可以正确显示，但行仅显示一种背景色

这是我的模板代码

<template>
    <div>
        <h5 class="mb-4">Friends</h5>
      <table class="table table-borderless table-striped ">
                <tbody>
                    <div v-for="(friend, index) in UserStore.friends">
                        <tr>
                            <td class="text-center" style="width: 100px;">
                                <img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
                            </td>
                            <td>
                                <a href="javascript:void(0)">{{friend.name}}</a><br>
                                <a href="javascript:void(0)" class="text-muted"><small>29 years old on Friday</small></a>
                            </td>
                            <td class="text-center" style="width: 80px;">
                                <a href="javascript:void(0)" class="btn btn-effect-ripple btn-xs btn-primary" data-toggle="tooltip" title="" style="overflow: hidden; position: relative;" data-original-title="Send a gift"><i class="fa fa-gift"></i></a>
                            </td>
                        </tr>
                    </div>
                </tbody>
            </table>
        <div v-if="!UserStore.friends">
            <h6>You don't have any friends :(</h6>
            <a href="">Lets solve that Right now!</a>
        </div>
    </div>
</template>

Answer 1

您应该使用template元素来呈现这些行。 .table-striped适用于同级行，并且在您的代码中这些行不是同级行，因为它们每个都有div父级，因此每行都被视为第一行。

<tbody>
    <template v-for="(friend, index) in UserStore.friends">
        <tr>
            <td class="text-center" style="width: 100px;">
                <img style="width: 100px;" :src="friend.avatar" alt="User Image" class="rounded-circle">
            </td>
            <td>
                <a href="javascript:void(0)">{{friend.name}}</a><br>
                <a href="javascript:void(0)" class="text-muted"><small>29 years old on Friday</small></a>
            </td>
            <td class="text-center" style="width: 80px;">
                <a href="javascript:void(0)" class="btn btn-effect-ripple btn-xs btn-primary" data-toggle="tooltip" title="" style="overflow: hidden; position: relative;" data-original-title="Send a gift"><i class="fa fa-gift"></i></a>
            </td>
        </tr>
    </template>
</tbody>

引导条带化表不适用于Vuejs

1 个答案: