在Vue js中单击每个表头时如何显示升序和降序箭头图像？

Posted 2023-02-22

【中文标题】在Vue js中单击每个表头时如何显示升序和降序箭头图像？

【英文标题】：How to show ascending and descending arrow image when click on each table head in Vue js?

【发布时间】：2016-11-05 05:52:15

【问题描述】：

我有一个列表页面，正在使用 laravel 获取数据，当我单击表头 <th> 时，可以对数据进行升序和降序排序。排序工作时，我需要在上下方向显示箭头标记。

我的问题是： 目前，当我单击一个表头<th>时，所有表头箭头标记都向下显示。我的意思是当我点击“客户编号”时，“名字”和“姓氏”箭头标记向下和向上显示。

其实我期待的结果是，当我点击一个表头时，箭头标记只反映一个。请检查下面给出的图像和代码。任何帮助将不胜感激。

<thead>
 <tr>
    <th v-for="key in columns" @click="sortBy(key)" :class="active: sortKey == key">@ colTitles[key]  <span class="arrow" :class="order > 0 ? 'asc' : 'dsc'"></span>
     </th>
 </tr>                   
 </thead>
 <tbody>
        <tr v-for="(index, item) in items | orderBy sortKey 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>
 </tbody>

script.js

new Vue(
            el: '#app',

            data: 
                sortKey: '',

                order: 1,

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

                colTitles: 'erp_id':'Customer No', 'firstname':'First name', 'lastname':'Last name'
              ,

 methods: 
                sortBy: function (key) 
                    this.sortKey = key;
                    this.order   = this.order * -1;
                    //alert(this.order = this.order * -1);
                    //alert(this.sortKey = key);
                    //this.sortOrders[key] = this.sortOrders[key] * -1
                    //order = order * -1
                
            
);

style.css

<style>
th.active .arrow 
        opacity: 1;
    

    .arrow 
        display: inline-block;
        vertical-align: middle;
        width: 0;
        height: 0;
        margin-left: 5px;
        opacity: 0.66;
    

    .arrow.asc 
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #42b983;
    

    .arrow.dsc 
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #42b983;
    

    #search 
        margin-bottom: 10px;
    
</style>

【问题讨论】：

如果我误解了您的问题，请发表评论。

【参考方案1】：

如何为每列赋予自己的顺序

如果您想为每列赋予其不同的排序顺序，那么您需要为每个顺序存储一个值。

以下 sn-p 是实现此目的的一种方法。现在，每列都与name 和order 相关联。排序是根据activeColumn 的值完成的，这是在单击表格标题时设置的。

此外，我已经做到了，只有在单击箭头时排序顺序才会改变。 This way, the sort order doesn't always change when a new heading is selected.

var app = new Vue(
  el: '#app',

  data: 
    activeColumn: ,
    columns: [
      name: 'firstname', order: 1, 
      name: 'lastname', order: 1,
      name: 'email', order: 1,
    ],
    colTitles: 'firstname':'First name', 'lastname':'Last name', 'email':'Email',    
    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' ,
    ]
  ,
);

th.active .arrow 
  opacity: 1;


.arrow 
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;


.arrow.asc 
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #42b983;


.arrow.dsc 
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #42b983;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<div id="app">
  <table border="1" style="width:100%">
    <thead>
      <tr>
        <th v-for="column in columns" 
            @click="activeColumn = column" 
            :class="active: column == activeColumn"
            >
           colTitles[column.name]  
          <span 
                @click="column.order = column.order * (-1)"
                class="arrow  column.order > 0 ? 'asc' : 'dsc' " 
                >
          </span>
        </th>
      </tr>                   
    </thead>

    <tr v-for="item in items | orderBy activeColumn.name activeColumn.order">
      <td> item.firstname </td>
      <td> item.lastname </td> 
      <td> item.email </td>
    </tr>
  </table>  

  <pre> Active Column:  activeColumn | json </pre>
</div>