数据结构 实现日期选择器变背景色

这是一个饿了么做的表格，可以实现展开收起，需求是在查看的时候如果有过改动，就把改动的那个变颜色。

这个是后端返回的数据格式，
weekReportMilepostDtoList是项目阶段，weekReportTaskDtoList是下面的任务，里面标出来的是老值和新值，如果不一样就说明改过了，请问下怎么实现啊

实现了，使用表格的cell-class-name，拿到当前行，进行判断

改完后会是新的值，那么你就判断两个值对比是不是一样，不一样代表改过了，然后动态加类名，那个类名样式写个颜色就可以了

该回答引用GPTᴼᴾᴱᴺᴬᴵ
根据你的需求，需要在表格中标记有过改动的部分，可以通过在表格中渲染不同的背景颜色来实现。
·
具体实现的思路是，将表格中需要标记的数据项和它们对应的属性值保存在一个数组中，然后使用 v-for 指令渲染表格时，对于每个数据项，判断它是否需要标记，如果需要标记，则给它对应的行或列添加一个类名，这个类名控制这行或列的背景颜色。
·
在你提供的数据中，需要比较的属性包括 actualFinishedDate，actualStartDate，planFinishedDate 和 planStartDate。这些属性的比较可以使用 JavaScript 的 Date 对象，将日期字符串转换为日期对象进行比较。
·
以下是一个简单的示例代码，你可以根据实际情况进行修改和适配：

<template>
  <table>
    <thead>
      <tr>
        <th>Task Name</th>
        <th>Start Date</th>
        <th>End Date</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="task in tasks" :class="{ 'bg-yellow': needsMark(task) }">
        <td>{{ task.name }}</td>
        <td>{{ task.planStartDate }}</td>
        <td>{{ task.planFinishedDate }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        {
          name: 'Task A',
          actualStartDate: '2022-02-01',
          actualFinishedDate: '2022-02-15',
          planStartDate: '2022-01-01',
          planFinishedDate: '2022-02-28'
        },
        {
          name: 'Task B',
          actualStartDate: '2022-02-16',
          actualFinishedDate: '2022-03-01',
          planStartDate: '2022-02-01',
          planFinishedDate: '2022-03-31'
        },
        {
          name: 'Task C',
          actualStartDate: '2022-03-02',
          actualFinishedDate: '2022-03-15',
          planStartDate: '2022-03-01',
          planFinishedDate: '2022-03-15'
        }
      ]
    }
  },
  methods: {
    needsMark(task) {
      const actualStartDate = new Date(task.actualStartDate);
      const actualFinishedDate = new Date(task.actualFinishedDate);
      const planStartDate = new Date(task.planStartDate);
      const planFinishedDate = new Date(task.planFinishedDate);

      if (
        actualStartDate > planStartDate ||
        actualFinishedDate > planFinishedDate
      ) {
        return true;
      }

      return false;
    }
  }
}
</script>

在这个示例中，我们使用 v-for 指令遍历 tasks 数组，并为每个任务的行指定一个类名，类名是通过调用 needsMark 方法返回的布尔值来决定的。needsMark 方法会比较任务的实际开始日期和结束日期与计划开始日期和结束日期，如果实际日期超过了计划日期，就返回 true，否则返回 false。最终，使用类名控制表格行的背景颜色。在这个示例中，我们使用了一个名为 "bg-yellow" 的类名，用来标记需要标记的行。你可以根据需要自定义这个类名以及其对应的背景颜色。