我们如何在vue js中为多个表标题添加排序

Question

如何在vue js中为多个表标题添加排序？当前状态：排序仅适用于名字。 orderBy 'firstname' order是否可以对更多标题进行排序，例如orderBy 'firstname' 'lastname' 'email' order。它是基于laravel的项目的一部分。任何帮助将不胜感激。

表头

<th v-for="key in columns" @click="order = order * -1" :class="{active: sortKey == key}">@{{ colTitles[key] }}</th>

表原始

<tr v-for="(index, item) in items | orderBy 'firstname' order">
                        <td>@{{ item.erp_id }}</td>
                        <td>@{{item.firstname}}</td>
                        <td><a href="{{ url('/customer/details/') }}/@{{ item.id }}">@{{item.lastname}}</a></td>
                        <td>@{{item.email}}</td>
                        <td>@{{item.phone_1}}</td>
                        <td>@{{item.status}}</td>
                        <td>@{{item.created_on}}</td>
</tr>

JS

data: {
        sortKey: '',

        order: 1,

        columns: ['erp_id', 'firstname', 'lastname', 'email', 'phone_1', 'status', 'created_on'],

        colTitles: {'erp_id':'@lang('messages.customerListPageTableCustomerNo')', 'firstname':'@lang('messages.customerListPageTableFirstname')', 'lastname':'@lang('messages.customerListPageTableLastname')', 'email':'E-Mail', 'phone_1':'@lang('messages.customerListPageTablePhone')', 'status':'Status', 'created_on':'@lang('messages.customerListPageTableAddedDate')'},
}

Answer 1

编辑 - 单击标题时更改排序

您已根据点击的标题表示您希望排序顺序更改。原始答案解释了如何按多个属性排序（首先按prop1排序，如果prop1是相同的，则按prop2排序等）。

要更改排序顺序，您必须更改orderBy的属性。为此，请将属性设置为变量，并在单击标题时更改该变量。

以下是显示如何执行此操作的代码段：

var app = new Vue({
	el: '#app',
  
  data: {
    sortProp: 'firstname',
    items: [
      { firstname: 'aaa', lastname: 'ccc', email: 'eee' },
      { firstname: 'bbb', lastname: 'ddd', email: 'ddd' },
      { firstname: 'ccc', lastname: 'eee', email: 'aaa' },
      { firstname: 'ddd', lastname: 'aaa', email: 'ccc' },
      { firstname: 'eee', lastname: 'bbb', email: 'bbb' },
    ]
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <table border="1" style="width:100%">
    <tr>
      <!-- We change the sortProp when a heading is clicked -->
      <th @click="sortProp = 'firstname'">First Name</th>
      <th @click="sortProp = 'lastname'">Last Name</th> 
      <th @click="sortProp = 'email'">Email</th>
    </tr>
    
    <!-- We sort based on `sortProp`, which is a variable rather than a hardcoded string -->
    <tr v-for="item in items | orderBy sortProp">
      <td>{{ item.firstname }}</td>
      <td>{{ item.lastname }}</td> 
      <td>{{ item.email }}</td>
    </tr>
  </table>  
</div>

原始答案 - 对多个属性进行排序

Vue js 1.0 支持多种排序顺序，它完全使用您提出的语法。例如。 orderBy 'prop1' 'prop2' ... 'propN' order。

以下是显示此操作的片段

var app = new Vue({
	el: '#app',
  
  data: {
  	order: 1,
    items: [
      { firstname: 'aaa', lastname: 'ddd', email: 'eee' },
      { firstname: 'bbb', lastname: 'ccc', email: 'ddd' },
      { firstname: 'aaa', lastname: 'ccc', email: 'ddd' },
      { firstname: 'aaa', lastname: 'aaa', email: 'ddd' },
      { firstname: 'aaa', lastname: 'aaa', email: 'aaa' },
    ]
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="item in items | orderBy 'firstname' 'lastname' 'email' order">
      {{ item.firstname }} {{ item.lastname }} - {{ item.email }}
    </li>
  </ul>
</div>

如果您使用的是旧版本的Vue（0.12或0.11），则此功能可能无法使用。