当它被 vue v-for 填充时，我可以制作一个 table sortable 吗？

Question

我的客户要求我对所有列进行以下 table 排序 table：

<table class="table table-striped table-condensed">
<thead>
    <tr>
        <th style="width: 18%">Customer/Supplier</th>
        <th style="width: 7%">Title</th>
        <th style="width: 10%">First Name</th>
        <th style="width: 10%">Last Name</th>
        <th style="width: 10%">Department</th>
        <th style="width: 10%">Email Address</th>
        <th style="width: 15%">Main Phone</th>
        <th style="width: 10%">Catetory</th>
        <th style="width: 10%">Position</th>
    </tr>
</thead>
<tbody>
    <tr v-for="(item, index) in SearchResultContactList" v-bind:key="item.ContactID" v-on:click="viewContact(item.ContactID)">
        <td>{{item.CustomerName}}{{item.SupplierName}}</td>
        <td>{{item.TitleName}}</td>
        <td>{{item.FirstName}}</td>
        <td>{{item.LastName}}</td>
        <td>{{item.DepartmentName}}</td>
        <td>{{item.EmailAddress}}</td>
        <td>{{getContactMainPhoneNumber(item)}}</td>
        <td>{{item.CategoryName}}</td>
        <td>{{item.Position}}</td>
    </tr>
</tbody>

我已经在“姓氏”列中试过了

            <th data-field="LastName" data-sortable="true" style="width: 10%">Last Name</th>

然而，它不起作用。有任何想法吗？谢谢

Answer 1

我打算按照评论的建议提出建议，所以我构建了一个缩小的示例组件来演示。

new Vue({
  el: '#app',
  data: {
   contacts: [
      {
        firstName: 'Aaa',
        lastName: 'Www'
      },
      {
        firstName: 'Lll',
        lastName: 'Mmm'
      },
      {
        firstName: 'Zzz',
        lastName: 'Bbb'
      },
    ]
  },
  methods: {
    sortContacts(property) {
      this.contacts.sort((a, b) => (a[property] > b[property]) ? 1 : -1);
    }
  }
})

th {
  cursor: pointer;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id='app'>
  <div class="sort-table-by-columns">
    <div class="row"><div class="col-md-6">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th @click="sortContacts('firstName')">FIRST NAME</th>
            <th @click="sortContacts('lastName')">LAST NAME</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(contact, index) in contacts" :key="index">
            <td>{{ contact.firstName }}</td>
            <td>{{ contact.lastName }}</td>
          </tr>
        </tbody>
      </table>
    </div></div>
  </div>
</div>

当它被 vue v-for 填充时，我可以制作一个 table sortable 吗？

Can I make a table sortable when it's populated by vue v-for?

html-table

vue.js