如何在 element-ui 中为 datetimepicker 时间范围选择器设置默认时间？

Question

我要设置的默认时间范围是当天的00:00:00到23:59:59 。 我可以使用v-model绑定value1中的data ，但是绑定到computed的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

您不能直接在computed中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);
    },
  },
});