比较 DataTables 标题以在 Vuetify 中进行过滤？答案

【问题标题】：Comparing DataTables headers for filtering in Vuetify?比较 DataTables 标题以在 Vuetify 中进行过滤？
【发布时间】：2018-04-26 10:20:08
【问题描述】：

我有一个数据表，它的标题值是月份。现在我想从对象数组中选择与之关联的匹配月份和值，并将其显示在此表中的关联列中。

这是标题：-

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

现在在数据表中，应该是这样的：-

+-----------------------+
|  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 个月，并且缺少前几个月，那么我不确定如何应用它？有人有什么想法吗？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

你可以这样做；不是最好的解决方案，但这是可行的；

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

}

【讨论】：