在表格底部动态锁定tr

Question

有什么方法可以用VUE或Js在表的末尾锁定tr吗？

我有一个Vue-Component，它根据API调用动态添加tablerows，但我需要一个特定的tr在底部，如果添加了新的tr，它应该在最后一个的上方。

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

下面是Vue-Component

<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

如果您的组件在循环中迭代，您可以在上面呈现这个特定的after循环

<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>