el-date-picker选择月份范围自动拼接选择月份的第一日和最后一日

可以通过el-date-picker组件的`format`和`value-format`属性来实现选择月份范围自动拼接选择月份的第一日和最后一日。

以下是一个简单的示例：

<template>
  <div>
    <el-date-picker
      type="month"
      v-model="range"
      format="yyyy-MM"
      value-format="yyyy-MM"
      range-separator=" ~ "
      @change="onChange"
    ></el-date-picker>
    <p v-if="range">{{ startDate }} ~ {{ endDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      range: null
    };
  },
  computed: {
    startDate() {
      if (this.range) {
        return this.range[0] + '-01';
      } else {
        return '';
      }
    },
    endDate() {
      if (this.range) {
        const date = new Date(this.range[1]);
        const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
        return this.range[1] + '-' + lastDayOfMonth;
      } else {
        return '';
      }
    }
  },
  methods: {
    onChange() {
      this.$emit('change', [this.startDate, this.endDate]);
    }
  }
};
</script>

在上面的示例中，我们使用了el-date-picker组件来选择月份范围，并通过`format`和`value-format`属性来格式化日期。我们还使用了`range-separator`属性来指定月份范围的分隔符。当用户选择月份范围后，我们将选择的月份的第一日和最后一日自动拼接起来，并将其显示在页面上。

注意，我们使用了computed属性来计算选择月份的第一日和最后一日，并在页面上显示。在计算结束后，我们还使用了`change`事件将这两个日期值传递给父组件。