Сравнивая заголовки DataTables для фильтрации в Vuetify? - PullRequest
Новая
       17

Сравнивая заголовки DataTables для фильтрации в Vuetify?

0 голосов
/ 26 апреля 2018

У меня есть таблица данных, а значения ее заголовков - месяцы. Теперь я хочу выбрать из массива объектов соответствующие месяцы и значение, связанное с ним, и показать его в этой таблице в соответствующем столбце.

Вот заголовки: - 

headers:[
  {
    text:'1',
    align:'left',
    value:'month'
 },
 {
    text:'2',
    align:'left',
    value:'month'
 },
 {
    text:'3',
    align:'left',
    value:'month'
 },
 {
    text:'4',
    align:'left',
    value:'month'
 }
]

Массив объектов выглядит так: - 

array:[
  {
    month:1,
    value: 200
  },
 {
    month:2,
    value: 300
  },
 {
   month:3,
   value: 400
  },
 {
   month:4,
   value: 500
  }
]

сейчас в datatable, это должно быть так: - 

+-----------------------+
|  1  |  2  |  3  |  4  |   <- headers.text
+-----------------------+
| 200 | 300 | 400 | 500 |   <- array.value
+-----------------------+

Я пробовал простую таблицу данных, например: - 

<v-data-table
  v-bind:headers="headers"
  :items="array"
  hide-actions              
  class="elevation-1"
    >             
    <template slot="headers" slot-scope="props">
        <tr>                    
            <th v-for="header in props.headers" :key="header.text"
                                  v-bind:align="header.align"
                                  class="text-xs-left"
                                >   
                 <div class="text-xs-left">{{$t(header.text)}}</div> 
            </th>
        </tr>                 
    </template>
    <template slot="items" slot-scope="props">  
        <tr>
            <td>props.item.value</td>               
        </tr>                
    </template>           
</v-data-table>

но как мне узнать, какие значения принадлежат каким месяцам? предположим, что в массиве более 4 месяцев, а первые месяцы отсутствуют, тогда я не уверен, как это применить? У кого-нибудь есть идеи?

1 Ответ

0 голосов
/ 26 апреля 2018

Вы можете сделать это; не лучшее решение, но это работа; 

<body>
<div id="app-2">
    <table>
        <thead>
            <tr>
                <td v-for="head in headers">{{head.text}}</td>
            </tr>
            <tr>
                <td v-for="head in headers">{{head.value}}</td>
            </tr>
        </thead>
    </table>
</div>

 <script>
   var app2 = new Vue({
    el: '#app-2',
    data: {
        headers: [
          {
           text: '1',
           align: 'left',
           value: 'month'
          },
          {
           text: '2',
           align: 'left',
           value: 'month'
          },
          {
           text: '3',
           align: 'left',
           value: 'month'
           },
           {
            text: '4',
            align: 'left',
            value: 'month'
           }
        ]
    }
})
var array = [
 {
     month: 1,
     value: 200
 },
{
    month: 2,
    value: 300
},
{
    month: 3,
    value: 400
},
{
    month: 4,
    value: 500
}
];

for (var i = 0; i < array.length; i++) {
    for (var k = 0; k < array.length; k++) {
        if (array[i].month == app2.$data.headers[k].text) {
            (app2.$data.headers[k].value = array[i].value)
        }
    }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...