点击 Vue JS 2 排序表 td

Question

我正在尝试使用 Vue JS 2 根据单击表格行中的表格标题对 HTML 表格的数据进行排序。

我已经实现了第一列的排序。但是，由于某种原因，可能是一些语法问题，其余列的排序不起作用。

在 HTML 中，排序函数的参数对我来说似乎有问题。

<th v-for="(toolAttribute, index) in results.toolAttribute" :key="index" @click="sort('info.value')" class="header">{{toolAttribute.attributeName}}</th>

查看JS文件的东西：

computed:{
    sortedResults:function() {
      return this.results.device.sort(function(a,b){
        let modifier = 1;
        if(this.currentSortDir === 'desc') modifier = -1;
        if(a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
        if(a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
        return 0;
      }.bind(this));
    }
  }

具体来说：

return this.results.device.sort(function(a,b)

这是相同的小提琴：

https://jsfiddle.net/48x9wnud/

Answer 1

您有一些未定义的行为将 info.value 传递到 {info:[{value: true}, ...]} 通过传递数组来解决此问题：

sort(['deviceName'])

或

sort(['info', index, 'value'])

在Array.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;

}

解决方案：

new Vue({
el: '#app',
data: {
results: {
  toolAttribute: [{attributeName: "Present"},{attributeName: "Present"},{attributeName: "Present"}],
  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}]}
     ]
},
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;
}

.header {
  cursor: pointer;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<table >
 <tr>
 <th rowspan="2" @click="sort(['deviceName'])" class="header">Device Info</th>
 </tr>
 <tr>
 <th v-for="(toolAttribute, index) in results.toolAttribute" :key="index" @click="sort(['info', index, 'value'])" class="header">{{toolAttribute.attributeName}}</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>