Vue.js根据行值或html id匹配表中的数据值答案

【问题标题】：Vue.js matching data value in table based on the row value or html idVue.js根据行值或html id匹配表中的数据值
【发布时间】：2019-09-14 07:40:22
【问题描述】：

我建立了一个以月份和年份为列的表格，这是固定的，无法更改。

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

<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 中没有日期02-2019 的值。

如何使用 vue 实现这一点？我试图创建一个函数，但似乎 v-for 将我的地图转换为一个数组。

【问题讨论】：

1.将第一个表格行的月份作为数组添加到您的应用程序 2. 根据月份和 dataSet 创建第二个五元素数组（使用 null 或 "-" 用于空单元格） 3. 使用 v-for 循环输出两行.
@ChrisG 你能把它添加到答案吗？

标签： javascript vue.js vuejs2

【解决方案1】：

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

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

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

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

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

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

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

这是一个pen 我用这个来测试。

根据获取第一行数据的方式，您可以使用 dynaicData 作为计算变量。除了代码会更简洁一些之外，其他都是一样的。

祝你好运

【讨论】：