vue.js - 带有用于排序的 Bootstrap 图标的 VueJS
问题描述
我通过单击表格标题对列数据进行排序。
我已经根据 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>
解决方案
推荐阅读
- c# - 将 Prefab 中的 Children 设置为单独的 GameObjects
- laravel - 如何在 laravel 中使用这个包:orchestra/parser=~3.0 in laravel
- javascript - 如何避免反应数据表中的重复逻辑
- javascript - 按键在循环内不起作用
- swift - Xcode 归档总是失败
- angular - Npm 使用相对路径发布
- python - 如何使用python程序定期更新网站
- dapper - 如何在 Dapper 中使用 dapper.fluentmap?
- arrays - 如何通过Swift中的for循环将数组的所有元素附加到标签
- android - 在 JNI_OnLoad 之前在 Android 本机代码的全局对象构造函数中获取 Java VM 指针