Question

我正在采取vuejs的第一步，并遇到了这个问题。我想要在表格中显示这些数据，使用这段相当简单的代码：

<table class="table table-striped table-hover" :class="[hide ? 'thide' : '']">
    <thead>
        <tr>
            <th v-for="(item, index) in _items[0]">{{fixTheaders(index)}}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item, index) in _items">
            <td v-for="field in item">{{item}}</td>
        </tr>
    </tbody>
</table>

现在的问题是每个item都以下列形式存储数据，例如：

{ 
  "cost": "123.324", 
  "placement": "placement-1", 
  "date": "2017-03-03", 
  "device": "mobile" 
}

所以在这种情况下，表格将按此顺序显示数据：费用|安置|日期|设备
但我希望订单是：date |设备|费用|安置我有一种感觉，最好的方法是拥有阵列：

filters = ['date,'device','cost','placement']

并使用它，但我找不到一个vuejs方法来处理它。所以，任何想法会在vuejs中考虑最佳实践，以按照我在数组中设置的顺序在表格中显示数据吗？

值得一提的是，在初始化时，订单是在服务器上确定的，并且从这一侧修复它不是一个选项

Answer 1

就个人而言，我只是硬编码标题，并在你的tbody中获得正确的值

<tbody>
    <tr v-for="(item, index) in _items">
        <td>{{item.date}}</td>
        <td>{{item.device}}</td>
        <td>{{item.cost}}</td>
        <td>{{item.placement}}</td>
    </tr>
</tbody>

除非你需要更多的东西用它们完成，那么包含所需顺序列密钥的属性才是我真正想要的： - ）

vuejs按数组顺序排序表列的最佳实践

1 个答案: