Html、Vue、Laravel - v-for 和 table 中的循环

Posted 2023-02-22

【中文标题】Html、Vue、Laravel - v-for 和 table 中的循环

【英文标题】：Html, Vue, Laravel - loop in v-for and table

【发布时间】：2018-02-13 12:01:29

【问题描述】：

我有一个简单的表，每个 tr 都是一个带有特定订单的链接，但我必须有一个额外的列 n 来检查，否则这个订单已经在商店里了。 （带有复选框）我不能这样做，因为当我添加这个时，所有行都是一个链接，但我希望最后一列不是链接，而是简单的复选框。 这是我的代码：

<table class="table">
            <tr>
                <th>Order Number</th>
                <th>Name</th>
                <th>Tel</th>
                <th>Email</th>
                <th>Status</th>
                <th>Order date</th>
                <th>IS in store?</th>
            </tr>

            <router-link :to="'/orderDetail/'+order.id" tag="tr" v-for="order in orders" :key="order.number"
                         class="order-row">
                <td>order.number</td>
                <td>order.client_name</td>
                <td>order.phone</td>
                <td>order.email</td>
                <td>order.actual_status</td>
                <td>order.order_date</td>
                <td>Here should be checbox with id of roder, but not as a link</td>
            </router-link>

        </table>

html css：

  .order-row:hover td 
  cursor: pointer;
  transition-duration: 0.3s;
  background-color: #EfEEEE;
  border-top: 1px solid #e0093e;
  border-bottom: 1px solid #e0093e;
  color: #e0093e;

【问题讨论】：

你用过哪个 Vuejs 版本？ 1 还是 2？

【参考方案1】：

首先创建一个方法，像这样

        orderRedirect: function(order) 
            this.$router.replace('/orderDetail/' + order.id); // For Vuejs 2
            this.$route.router.go('/orderDetail/' + order.id); //For Vuejs 1
        ,

然后在点击table td 时调用这个函数，类似这样

<table class="table">
    <tr>
        <th>Order Number</th>
        <th>Name</th>
        <th>Tel</th>
        <th>Email</th>
        <th>Status</th>
        <th>Order date</th>
        <th>IS in store?</th>
    </tr>
    <tr v-for="order in orders" class="order-row">
        <td @click="orderRedirect(order)" style="cursor: pointer">order.number</td>
        <td @click="orderRedirect(order)" style="cursor: pointer">order.client_name</td>
        <td @click="orderRedirect(order)" style="cursor: pointer">order.phone</td>
        <td @click="orderRedirect(order)" style="cursor: pointer">order.email</td>
        <td @click="orderRedirect(order)" style="cursor: pointer">order.actual_status</td>
        <td @click="orderRedirect(order)" style="cursor: pointer">order.order_date</td>
        <td><input type="checkbox"></td>
    </tr>
</table>

这是您可以从复选框 td 中删除链接的一种方式

【讨论】：

没关系，但是请检查我的 css，当有人将鼠标悬停在 tr 上时，所有 td 都有特殊的背景 - 包​​括输入类型复选框，是否有可能在没有这个的情况下让这个列“存储中”悬停样式？

没有悬停，你可以使用类似<table class="table table-hover">的东西，但它不会根据你的css给出相同的悬停样式，所以最好使用这个css cass

【参考方案2】：

尝试以下方式：

<td><input type="checkbox" v-model="order.actual_status"></td>