如何在VueJS组件中实现表格表头仅显示一次而非逐行重复

3. 修正后的完整代码 #

假设你的搜索结果存在组件的searchResults数组字段中，修正后代码如下：

<!-- 整个table仅渲染一次，不要在外层加v-for -->
<table class="table table-hover" id="simpleTable">
  <thead>
    <tr>
      <th
        v-on:click="sortTable('title')"
        scope="col"
        class="col-md-3 position-relative"
      >
        Course
        <!-- 排序箭头放到th内部 -->
        <div
          class="arcoursedata"
          v-if="'title' == sorttitle"
          v-bind:class="ascending ? 'arcoursedata_up' : 'arcoursedata_down'"
        ></div>
      </th>
      <th scope="col">Award</th>
      <th scope="col">Level</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 仅对行做循环 -->
    <tr v-for="(item, index) in searchResults" :key="item.id || index">
      <td class="col-md-3">
        {{ item.title }}
      </td>
      <td>
        {{ item.award }}
      </td>
      <td class="col-md-3">
        {{ item.level }}
      </td>
      <td class="col-md-3">
        <a
          :href="item.displayUrl"
          class="btn-sm btn-primary"
          role="button"
        >
          <span class="sr-only">Read more about {{ item.title }}</span> Read
          more
        </a>
      </td>
    </tr>
  </tbody>
</table>

• 绑定点击排序的字段直接传字符串'title'即可，不要直接传变量title，避免和循环项的title字段混淆
• 循环的key尽量用每条数据的唯一标识字段（比如id）替换index，提升列表渲染性能

内容的提问来源于stack exchange，提问作者user13928344