Блог

Главная - Вопросы по программированию - VueJS с загрузочными значками для сортировки

VueJS с загрузочными значками для сортировки

#vue.js

#vue.js

Вопрос:

Я сортирую данные столбца, щелкая по заголовку таблицы.

Я добавил значки начальной загрузки на основе условий v-show.

Раньше сортировка работала по щелчку заголовка таблицы, но теперь она должна работать по щелчку значка, который теперь не виден справа от столбца «Настоящее время».

Нужна помощь в этом. Источник проблемы находится в строке 13 в HTML:

 <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>

Ответ №1:

В вашем jsfiddle я вижу, что вы используете Bootstrap 4. При переносе начальной загрузки на версию 4 шрифт значка Glyphicons был удален. Я бы посоветовал вам взглянуть на одну из этих бесплатных альтернатив:

Ответ №2:

Вы могли бы попробовать это

я внес некоторые изменения в jsfiddle https://jsfiddle.net/thanseeh/tqy93meL/13 /

 <head>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


<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>
</body>
Метки: