el-date-picker establece el valor predeterminado de la fecha (desde el principio del mes hasta el final del mes)

 1. Estilo de fecha de ElementUI

        <el-date-picker
          v-model="queryParams.signDate"
          type="daterange"
          align="right"
          unlink-panels
          size="small"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"

          :picker-options="pickerOptions">
        </el-date-picker>

2. Definir datos y métodos

A signDate aquí se le puede asignar un carácter nulo '' o una matriz vacía [], que contiene dos valores, uno es la fecha de inicio y el otro es la fecha de finalización

<script>

export default {


  data() {
    return {
      queryParams: {  
        signDate: ''
      },
   
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }

    }
  },

  created() {
    // 初始化默认时间
    this.defaultDate()
  },
  methods: {

    // 初始化默认时间
    defaultDate() {
      var date = new Date()
      var year = date.getFullYear().toString()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
      // var da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
      var da = new Date(date.getFullYear(), month, 0).getDate()
      da < 10 ? '0' + da.toString() : da.toString()
      var beg = year + '-' + month + '-01'
      var end = year + '-' + month + '-' + da
      this.queryParams.signDate = [beg, end] //将值设置给插件绑定的数据
    }


  },
  watch: {
    // 监听日期清理后数据为null进行处理否则会报错
    'queryParams.signDate'(newVal) {
      if (newVal == null) {
        this.queryParams.signDate = ''
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
    }
  }

}
</script>

Nota: Después de borrar el selector de fecha, hay un hoyo aquí. Después de seleccionar el formato de fecha y borrarlo, vuelva a cargarlo. Se asignará un valor nulo al signDate vinculado y se informará un error cuando se vuelva a cargar la página, así que configúrelo. el oyente anterior Si el valor es Cuando es nulo, se le asigna una cadena vacía '', de lo contrario, se informará el siguiente error y el oyente se puede configurar para que se ejecute normalmente

Segunda forma: dividir la fecha de inicio y la fecha de finalización en dos selectores de tiempo

<el-form-item  prop="startTime" style="margin-left: 20px">
        <el-date-picker
          v-model="queryParams.startTime"
          type="date"
          size="small"
          placeholder="开始日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          style="width: 130px"
          :picker-options="pickerOptionsStart"
        >
        </el-date-picker>

      </el-form-item>
      <el-form-item label="至" prop="endTime">
        <el-date-picker
          v-model="queryParams.endTime"
          type="date"
          size="small"
          placeholder="结束日期"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          style="width: 130px"
          :picker-options="pickerOptionsEnd"
        >
        </el-date-picker>
      </el-form-item>

 Definir parámetros y métodos de enlace

<script>

export default {

  data() {
    return {
      queryParams: {
        
        startTime: '',
        endTime: '',

      },
      // 开始时间不能大于结束时间
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.queryParams.endTime) {
            return (
              time.getTime() >= new Date(this.queryParams.endTime).getTime()
            )
          }
        }
      },
      // 结束时间不能小于开始时间
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.queryParams.startTime) {
            return (
              time.getTime() <= new Date(this.queryParams.startTime).getTime()
            )
          }
        }
      }
    }
  },
  created() {
  
    /** 重置按钮操作 */
    resetForm() {
      this.$refs['formName'].resetFields()
      this.queryParams.startTime = ''
      this.queryParams.endTime = ''
    },
   
    // 初始化默认时间
    defaultDate() {
      var date = new Date()
      var year = date.getFullYear().toString()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
      // var da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
      var da = new Date(date.getFullYear(), month, 0).getDate()
      da < 10 ? '0' + da.toString() : da.toString()
      var beg = year + '-' + month + '-01'
      var end = year + '-' + month + '-' + da
      this.queryParams.startTime = beg //将值设置给插件绑定的数据
      this.queryParams.endTime = end
    }
  },
  watch: {
    // 监听日期清理后数据为null进行处理否则会报错
    'queryParams.startTime'(newVal) {
      if (newVal == null) {
        this.queryParams.startTime = ''
      }
    },
    'queryParams.endTime'(newVal) {
      if (newVal == null) {
        this.queryParams.endTime = ''
      }
    }
  }

}
</script>