Question

我正在根据表标题的单击对表数据进行排序。排序工作。

我添加了真棒字体排序图标。

默认情况下，排序和排序图标都应出现在表格标题上，该代码目前适用于此代码。但是，单击一次表头后，应该仅针对该表头显示升序排序图标及其排序。第二次单击时，它应按降序及其图标排序。然后循环重复。

new Vue({
el: '#app',
data: {
results: {
  toolAttribute: [{attributeName: "Present", order: 1},{attributeName: "Present", order: 1},{attributeName: "Present", order: 1}],
  device: [
    {deviceName: "Device Name 1",
      info: [{value: true}, {value: false}, {value: true}]},
    {deviceName: "Device Name 2",
      info: [{value: false}, {value: false}, {value: false}]},
    {deviceName: "Device Name 3",
      info: [{value: true}, {value: true}, {value: true}]},
    {deviceName: "Device Name 4",
      info: [{value: false}, {value: true}, {value: false}]},
    {deviceName: "Device Name 5",
      info: [{value: true}, {value: true}, {value: true}]}
     ]
},
activeColumn: {},
currentSort:['deviceName'],
currentSortDir:'asc',
},
computed:{
    sortedResults:function() {
      return this.results.device.sort(function(a,b){
        let modifier = 1;
        if(this.currentSortDir === 'desc') modifier = -1;
        this.currentSort.forEach(x => {
        
           a = a[x];
           b = b[x];
        })
        
        if(a< b) return -1 * modifier;
        if(a > b) return 1 * modifier;
        return 0;
      }.bind(this));
    }
  },
  methods:{
  flasecond(index){
    let res = false
     this.results.device[index].info.forEach(info=> {
        if(!info.value) res = true
    })
      return res
  },
  sort:function(s) {
      //if s == current sort, reverse
      if(s.join('') === this.currentSort.join('')) {
        this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
        this.results.toolAttribute.order = this.results.toolAttribute.order * (-1);
        }
      this.currentSort = s;
    },
}
})

.falseclass{
  background:red;
  color:white;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<table >
 <tr>
 <th rowspan="2" @click="" :class="">Device Info<i class="fas fa-sort" @click="sort(['deviceName'])" ></i>
 <i :class="" v-show=""></i>
 </th>
 </tr>
 <tr>
 <th v-for="(toolAttribute, index) in results.toolAttribute" :key="index" @click="activeColumn = toolAttribute" :class="{active: toolAttribute == activeColumn}">{{toolAttribute.attributeName}}
 <i @click="sort(['info', index, 'value'])" :class="toolAttribute.order > 0 ? 'fas fa-sort-down' : 'fas fa-sort-up'" v-show="toolAttribute == activeColumn"></i>
 <i class="fas fa-sort" v-show="toolAttribute != activeColumn"></i></th>
 </tr>
 <tr v-for="(device, index) in sortedResults"  >
  <td :class="{'falseclass' : flasecond(index)}">{{ device.deviceName }}</td>
  <td v-for="info in device.info" :class="{'falseclass' : !info.value}">{{info.value}}</td>
</tr>
</table>
</div>

https://jsfiddle.net/pvqutckm/1/

Vue JS切换FA排序图标

0 个答案: