vue对明细行批量设置日期

您可以使用Vue的v-for指令对明细行进行循环，并使用Vue的事件监听器来捕获日期选择事件。在事件处理程序中，您可以将选定的日期分配给明细行中的每个日期字段。以下是一个示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>日期</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in detailList" :key="index">
          <td>{{ index + 1 }}</td>
          <td>
            <input type="date" @change="setDate($event.target.value, index)">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailList: [
        {
          id: 1,
          date: '',
        },
        {
          id: 2,
          date: '',
        },
        {
          id: 3,
          date: '',
        }
      ]
    }
  },
  methods: {
    setDate(dateValue, index) {
      this.detailList[index].date = dateValue;
    }
  }
}
</script>

在上面的代码中，我们使用了v-for指令循环显示明细行，并使用了<input>元素来显示日期选择器。当用户选择日期时，我们调用了事件处理程序setDate来将选定的日期分配给明细行中的日期字段。