在表格底部动态锁定 tr

Question

有没有办法用 VUE 或 Js 将 tr 锁定在表的末尾？

我有一个 Vue 组件，它基于 API 调用动态添加 tablerows，但我需要一个特定的 tr 位于底部，如果添加了新的 tr，它应该在最后一个之上。

不在 tfoot 中，因为还有一些其他信息

这里是 Vue 组件

<tbody>
      <tr is="deliverytable"
       v-for="delivery in deliveries"
       v-bind:key="delivery.id"
       v-bind:delivery="delivery"></tr>
</tbody>

Vue 组件的模板

<tr id="data" :class="{'incomplete' : delivery.event == '4'}">
  <td>
     <div v-if="delivery.is_printable">
       <input name="deliverynote" :value="delivery.id" :checked="delivery.is_printable_by_default" type="checkbox">
     </div>
  </td>
  <td>[[ delivery.dispatched ]] Uhr</td>
  <td>[[ delivery.action ]]</td>
  <td>
    <div v-if="!delivery.is_deletable">[[ delivery.article_name ]]</div>
    <div v-else-if="delivery.event != 0" v-on:change.close="autosave($event, delivery.id)" ref="article" v-html="delivery.articleform"></div>
  </td>
  <td>
    <div v-if="!delivery.is_deletable">[[ delivery.amount ]]</div>
    <div v-else-if="delivery.event != 0" @change="autosave($event, delivery.id)" ref="amount" v-html="delivery.amountform"></div>
  </td>
  <td><div id="weight" ref="delivery">[[delivery.weight]]</div></td>
  <td class="d-none"><input type="text" name="delivery" id="id_delivery" :value="delivery.id">[[delivery.id]]</td>
  <td id="price" ref="price">[[ delivery.price ]]</td><td v-else>0.00 €</td>
  <td>
    <a v-if="delivery.is_deletable" type="button" @click="removeDelivery(delivery.id)" class="icon icon-trash-can"></a>
  </td>
</tr>

Answer 1

如果你的组件在一个循环中迭代，你可以在上面的循环之后渲染这个特定的

<table>
  <thead>
    some headers
  </thead>
  <tbody>
    <tr v-for="(rowItem, key, index) in dataTable" :key="index">
      your API call items
    </tr>
    <tr>
      your specific item
    </tr>
  </tbody>
</table>