Vue中的迷你枢轴网格，没有外部库答案

【问题标题】：Mini pivot grid in Vue without external libraryVue中的迷你枢轴网格，没有外部库
【发布时间】：2020-03-12 15:18:18
【问题描述】：

我需要在 Vue 中创建一个超级简单的小型枢轴网格。我发现的所有软件包都为此而过分。我有两行四列的数据来自一个简单的 JSON 对象。

假设我的数据如下所示：

[
{
    "currentRate": 0.41,
    "miles": 501,
    "nextRate": 0.42
},
{
    "currentRate": 0.43,
    "miles": 301,
    "nextRate": 0.44
},
{
    "currentRate": 0.47,
    "miles": 201,
    "nextRate": 0.48
},
{
    "currentRate": 0.5,
    "miles": 51,
    "nextRate": 0.51
}

]

如何制作这样的表格/网格？

这是我的逻辑：

我们正在使用 Vue 2 和 Vuetify。

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

我选择做一些非常简单的事情。

我的 HTML：

<div id="app">
<v-app style="padding: 12px;" id="inspire">
    <div class="table-responsive">
        <table class="table-hover" style="width:800px;" v-if="matrix">
            <thead>
                <tr>
                    <th>Length of Haul in Miles</th>
                    <th>501+</th>
                    <th>301-500</th>
                    <th>201-300</th>
                    <th>50-200</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Current Rate</td>
                    <td>{{ currentRate[0] | simpleDecimal }}</td>
                    <td>{{ currentRate[1] | simpleDecimal }}</td>
                    <td>{{ currentRate[2] | simpleDecimal }}</td>
                    <td>{{ currentRate[3] | simpleDecimal }}</td>
                </tr>
                <tr>
                    <td>Next Rate</td>
                    <td>{{ nextRate[0] | simpleDecimal }}</td>
                    <td>{{ nextRate[1] | simpleDecimal }}</td>
                    <td>{{ nextRate[2] | simpleDecimal }}</td>
                    <td>{{ nextRate[3] | simpleDecimal }}</td>
                </tr>
            </tbody>
        </table>
</v-app>

还有我的 JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {  
    return {
            matrix: [
                    {
                            "currentRate": 0.41,
                            "miles": 501,
                            "nextRate": 0.42
                    },
                    {
                            "currentRate": 0.43,
                            "miles": 301,
                            "nextRate": 0.44
                    },
                    {
                            "currentRate": 0.47,
                            "miles": 201,
                            "nextRate": 0.48
                    },
                    {
                            "currentRate": 0.5,
                            "miles": 51,
                            "nextRate": 0.51
                    }
            ]     
    }
  },
  computed: {
    currentRate: function () {
            return this.matrix.map(function(rate) {
                return rate.currentRate;
            });
    },
    nextRate: function () {
            return this.matrix.map(function(rate) {
                return rate.nextRate;
            });
    },
  },
    filters: {
        simpleDecimal(value) {
            return value.toFixed(2).replace(/^0+/, '');
        }
    }
});

结果：

【讨论】：