elementUI日期选择实现选择当前月范围

在Element UI中，要实现选择当前月份的日期范围，你可以使用DatePicker组件的range-separator属性来设置分隔符，并通过计算当前月份的第一天和最后一天来设定默认值。

以下是一个简单的例子：

<template>
  <el-date-picker
    v-model="range"
    type="daterange"
    :default-time="['00:00:00', '23:59:59']"
    :picker-options="pickerOptions"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
  </el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      range: [],
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const year = end.getFullYear();
            const month = end.getMonth();
            const days = new Date(year, month + 1, 0).getDate();
 
            start.setDate(1);
            end.setDate(days);
 
            picker.setValues([start, end]);
          }
        }]
      }
    };
  }
};
</script>

在这个例子中，range是绑定到DatePicker组件上的数据，它是一个数组，包含开始和结束日期。pickerOptions中的shortcuts定义了一个快捷方式“本月”，点击后会自动计算并设置当前月份的第一天和最后一天作为日期范围的默认值。