Question

我建立了一个以月和年为列的表，此表是固定的，不能更改。

我的表当前是这样生成的：

<table>
    <tbody class="table">
        <tr>
            <td id="03-2019">03-2019</td>
            <td id="02-2019">02-2019</td>
            <td id="01-2019">01-2019</td>
            <td id="12-2018">12-2018</td>
            <td id="04-2017">04-2017</td>
        </tr>
        <tr id = "dynamicData">
            <td>10</td>
            <td>227</td>
            <td>342</td>
        </tr>
    </tbody>
</table>

带有id "dynamicData"的表行是由v-for模型生成的。

我拥有的数据集是一张地图，其中有键作为月年，而值作为结果。

所以看起来像这样：

var dataSet = {
  "12-2018 : "10",
  "03-2019" : "227",
  "04-2017": "342"
};

我通过dataSet生成了我的值，如下所示：

tr.dynamicData
    td(v-for="data in dataSet") {{data}}

但这不是我想要的。我希望数据与第一行的日期匹配。例如，在03-2019列下，数据值应为227，在02-2019列下，该值应为空，因为在我的dataSet中没有日期{ {1}}。

如何通过vue实现这一目标？我试图创建一个函数，但似乎02-2019将地图转换成数组。

Answer 1

您首先需要以一种对您的应用有意义的方式从第一行中获取日期（我不知道该数据是否由BE渲染，是否经过硬编码或来自何处）。

size

这些日期将用作查找其相应值的键。

现在遍历这些日期并在数据集中获取它们的相应值：

let dates = ['03-2019','02-2019','01-2019','12-2018','04-2017'];

最后，在v-for中执行相同的操作，但改用新的dynamicData变量

let dynamicData = dates.map( date => this.dataSet[date] )
  return dynamicDates;
}

这是我用来测试的pen。

根据如何获取第一行的数据，可以将dynaicData用作计算变量。除了代码会更简洁以外，其他方面都相同。

祝你好运

Vue.js根据行值或HTML ID匹配表中的数据值

1 个答案: