代码之家 › 专栏 › 技术社区 › SamohtVII

在Vuejs中对两个方向进行排序

electron vue.js sorting

SamohtVII · 技术社区 · 7 年前

我在Electron+VueJS2.x中有一个基本的应用程序(因为我是一个完全的初学者),我正在寻找一个对v-for列表的排序功能。我有一个半工作状态,我可以排序,但我想反向排序,如果第二次点击应用。我不确定解决这个问题的最佳方法,也许我现在要走的道路需要改进。请告诉我怎样才能做到这一点。

我用“selectedcategory”跟踪当前类别,如果它出现两次,就会运行 return this.items.reverse() 但我不能让它工作。

我已经清理了代码以帮助可读性。

export default {
  name: 'home-page',
  data() {
    return {
      selectedCategory: null,
      items: [{
          id: 1,
          name: 'Person 1',
          leave: 123.45
        },
        {
          id: 2,
          name: 'John Smith',
          leave: 13.45
        },
        {
          id: 3,
          name: 'Bill Smith',
          leave: 23.45
        },
        {
          id: 4,
          name: 'John Doe',
          leave: 133.53
        }
      ]
    }
  },
  methods: {
    sortedByName: function() {
      function compare(a, b) {
        if (a.name < b.name) {
          return -1
        }
        if (a.name > b.name) {
          return 1
        }
        return 0
      }
      this.selectedCategory = 'name'
      return this.items.sort(compare)
    },
    sortedByNumber: function() {
      // Same as above but a.leave and b.leave
    },
    sortedById: function() {
      // Same as above but a.id and b.id
    }
  }
}

<template>
       <a v-on:click="sortedById()">ID</a>
       <a v-on:click="sortedByName()">User</a>
       <a v-on:click="sortedByNumber()">Leave Owing</a>
                  
       <div id="page_list">
          <div class="user_row" v-for="item in items">
             <div class="user_status">{{ item.id }}</div>
             <div class="username">{{ item.name }}</div>
             <div class="leave_owing">{{ item.leave }}</div>
           </div>
       </div>
</template>

谢谢

1 回复 | 直到 7 年前

jacky 7 年前

您可以使用计算

var app = new Vue({
  el: '#app',
  computed: {
    sortedData () {
      if(!this.sort.field){
        return this.items
      }

      return this.items.concat().sort((a,b)=>{
        if(this.sort.desc){
          return a[this.sort.field] > b[this.sort.field] ? -1:1        
        }else{
          return a[this.sort.field] > b[this.sort.field] ? 1:-1                  
        }
      })
    }
  },
  data () {
    return {
      sort: {
        field: '',
        desc: true        
      },
      items: [
        { id: 1, name: 'Person 1', leave: 123.45 },
        { id: 2, name: 'John Smith', leave: 13.45 },
        { id: 3, name: 'Bill Smith', leave: 23.45 },
        { id: 4, name: 'John Doe', leave: 133.53 }
      ]
    }
  },
  methods: {
    doSort (field) {
      if(field == this.sort.field){
        this.sort.desc = !this.sort.desc
      }else{
        this.sort.field = field;
        this.sort.desc = true;
      }
    }
  }
})

  .user_row{
    display:flex;
  }
  .user_row>div{
    flex:1;
    text-align: center;
  }

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
   <a v-on:click="doSort('id')" href="javascript:">ID<span v-if="sort.field=='id'">({{sort.desc?'desc':'asc'}})</span></a>
   <a v-on:click="doSort('name')" href="javascript:">User<span v-if="sort.field=='name'">({{sort.desc?'desc':'asc'}})</span></a>
   <a v-on:click="doSort('leave')" href="javascript:">Leave Owing<span v-if="sort.field=='leave'">({{sort.desc?'desc':'asc'}})</span></a>

   <div id="page_list">
      <div class="user_row" v-for="item in sortedData">
         <div class="user_status">{{ item.id }}</div>
         <div class="username">{{ item.name }}</div>
         <div class="leave_owing">{{ item.leave }}</div>
       </div>
   </div>
</div>