如何在Element-UI中设置DateTimePicker时间范围选择器的默认时间？

Question

我要设置的默认时间范围是00:00:00 23:59:59当天。 我可以使用v-Model在data中绑定value1，但是value2绑定到的滚动计算会报告错误，为什么？ 完整的代码如下：

new Vue({
    el: '#app',
    data: function () {
      return {
        value1: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDay(), 0, 0, 0),
          new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDay(), 23, 59, 59)
        ],
      }
    },
    computed: {
      value2: {
        get() {
          let date = new Date()
          let y = date.getFullYear()
          let m = date.getMonth() + 1
          let d = date.getDay()
          let start = new Date(y, m, d, 0, 0, 0)
          let end = new Date(y, m, d, 23, 59, 59)
          return [start, end]
        },
        set(newVal) {
          this.value2 = newVal
        }
      },
    },
    methods: {
      change(e) {
        console.log('eee', e);
      }
    }
  })

Answer 1

您不能直接set在计算中的变量本身，这将导致无限循环。通常，设置了一个临时变量，并且get和set在此变量上操作。

new Vue({
  el: "#app",
  data: function () {
    return {
      value1: [
        new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDay(),
          0,
          0,
          0
        ),
        new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDay(),
          23,
          59,
          59
        ),
      ],
      value2Tmp: [],
    };
  },
  mounted() {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDay();
    let start = new Date(y, m, d, 0, 0, 0);
    let end = new Date(y, m, d, 23, 59, 59);
    this.value2Tmp = [start, end];
  },
  computed: {
    value2: {
      get() {
        return this.value2Tmp;
      },
      set(newVal) {
        this.value2Tmp = newVal;
      },
    },
  },
  methods: {
    change(e) {
      console.log("eee", e);
    },
  },
});