el-date-picker 扩展

后端对于时间范围字段都是两个字段 start 及 end el-date-picker只能v-model一个数组 每次从数组中取值 赋值很麻烦 所以对它做了一下扩展 代码如下

<template>
  <el-date-picker v-bind="$attrs" v-on="$listeners" v-model="queryTime"></el-date-picker>
</template>

<script>
export default {
  props: {
    start: {
      type: String | undefined | null,
      required: true
    },
    end: {
      type: String | undefined | null,
      required: true
    }
  },

  watch: {
    start(newVal) {
      if(!newVal) {
        this.$emit("update:end", undefined)
      };
    }
  },

  computed: {
    queryTime: {
      get() {
        if (!this.$props.start) return [];
        return [this.$props.start || "", this.$props.end || ""]
      },
      set(values = []) {
        this.$emit("update:start", values && values[0] ? values[0] : "");
        this.$emit("update:end", values && values[1] ? values[1] : "");
      }
    }
  }
}
</script>

使用方式如下

 <el-form-item class="mb10" label="创建时间" prop="startDate">
          <DateRangePicker 
            :start.sync="queryParams.startDate" 
            :end.sync="queryParams.endDate" 
            value-format="yyyy-MM-dd"
            type="daterange" 
            range-separator="-" 
            start-placeholder="开始日期" 
            end-placeholder="结束日期" />
        </el-form-item>

 

其中对开始时间做校验 如果开始时间没空 表单校验失败

相关推荐

  1. el-date-picker 扩展

    2024-07-10 08:18:02       10 阅读
  2. el-date-picker的使用

    2024-07-10 08:18:02       43 阅读
  3. vue el-date-picker封装及使用

    2024-07-10 08:18:02       29 阅读
  4. el-date-picker>时间戳单位

    2024-07-10 08:18:02       45 阅读
  5. element UI之 el-date-picker 无法选择当前日期

    2024-07-10 08:18:02       37 阅读

最近更新

  1. C语言:再探C语言指针

    2024-07-10 08:18:02       0 阅读
  2. 安卓开发使用seekBar改变ImageView中图片的色彩

    2024-07-10 08:18:02       0 阅读
  3. matlab中feval()的用法

    2024-07-10 08:18:02       0 阅读
  4. 【Linux常用命令】之mkdir命令

    2024-07-10 08:18:02       0 阅读
  5. 在 macOS 上使用 Jadx 进行 APK 反编译

    2024-07-10 08:18:02       0 阅读
  6. C++生成随机数的两种方法

    2024-07-10 08:18:02       0 阅读

热门阅读

  1. Go语言入门之变量、常量、指针以及数据类型

    2024-07-10 08:18:02       7 阅读
  2. Kotlin 处理livedata数据倒灌

    2024-07-10 08:18:02       8 阅读
  3. 针对vue3的render函数添加自定义指令

    2024-07-10 08:18:02       10 阅读
  4. Kotlin中的关键字

    2024-07-10 08:18:02       7 阅读
  5. Matlab 使用

    2024-07-10 08:18:02       13 阅读
  6. AI学习指南机器学习篇-层次聚类原理

    2024-07-10 08:18:02       9 阅读
  7. k8s-第一节-minikube

    2024-07-10 08:18:02       8 阅读
  8. 基于gunicorn+flask+docker模型高并发部署

    2024-07-10 08:18:02       8 阅读
  9. 数据无忧:Ubuntu 系统迁移备份全指南

    2024-07-10 08:18:02       7 阅读
  10. 3.配置MkDocs

    2024-07-10 08:18:02       8 阅读
  11. AI学习指南机器学习篇-层次聚类距离度量方法

    2024-07-10 08:18:02       8 阅读
  12. 中介子方程五十

    2024-07-10 08:18:02       8 阅读