Question

我通过单击表标题对列数据进行排序。

我已根据v-show条件添加了Bootstrap图标。

以前，排序是通过单击表标题进行的，但是现在应该通过单击图标（单击“当前”列的右侧现在不可见）进行排序。

对此需要帮助。问题的起源在HTML的第13行：

<span class="glyphicon glyphicon-sort" v-show="toolAttribute != activeColumn"></span>

https://jsfiddle.net/L5p0ngdu/2/

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.currentSort = s;
    },
}
})

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="app">
<table >
 <tr>
 <th rowspan="2" @click="sort(['deviceName'])">Device Info</th>
 </tr>
 <tr>
 <th v-for="(toolAttribute, index) in results.toolAttribute" :key="index" @click="activeColumn = toolAttribute" :class="{active: toolAttribute == activeColumn}">{{toolAttribute.attributeName}}
 <span @click="sort(['info', index, 'value']); toolAttribute.order = toolAttribute.order * (-1)" :class="toolAttribute.order > 0 ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-up'" v-show="toolAttribute == activeColumn"></span>
 <span class="glyphicon glyphicon-sort" v-show="toolAttribute != activeColumn"></span></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>

Answer 1

在您的jsfiddle中，我看到您正在使用Bootstrap4。将Bootstrap迁移到v4时，已删除Glyphicons图标字体。我建议您看看这些免费的替代品之一：

Answer 2

您可以尝试

我对jsfiddle https://jsfiddle.net/thanseeh/tqy93meL/13/

进行了一些更改

JSON 1: 

{
  "Name": "Sample",
  "Array": [],
  "Actions": [
    {
      "Name": "A",
      "Enabled": false
    },
    {
      "Name": "B",
      "Enabled": true
    }
  ]
}

JSON 2 :

{
  "Name": "Sample",
  "Array": [],
  "Actions": [
    {
      "Name": "A",
      "Enabled": true
    },
    {
      "Name": "B",
      "Enabled": false
    }
  ]
}

I need Result JSON as below.

{
  "Name": "Sample",
  "Tabs": [],
  "Actions": [
    {
      "Name": "A",
      "Enabled": true
    },
    {
      "Name": "B",
      "Enabled": true
    }
  ]
}

带有Bootstrap图标的VueJS进行排序

2 个答案: