关于Element中的日期选择器

最新推荐文章于 2025-09-18 09:39:50 发布

原创最新推荐文章于 2025-09-18 09:39:50 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文通过一个具体的项目案例，解析了三目运算符在处理日期选择器不同状态时的作用。当点击重置按钮，日期选择器被重置为空数组；而点击清除按钮，则被设为null。三目运算符据此作出正确判断。

问题描述

在熟悉的项目代码的过程中，发现了一个无用的三目运算符，这是我当时认为的。后来才发现是我自己浅了浅了。下面把代码给大家截出来，大家看看。

`HTML代码：`

<el-form-item label="创建时间" prop="createDate">
  <el-date-picker
    class="bsn-w-300"
    v-model="ruleForm.createDate"
    type="daterange"
    value-format="yyyy-MM-dd"
    format="yyyy-MM-dd"
    range-separator="~"
    :start-placeholder="$t('public.startDate')"
    :end-placeholder="$t('public.endDate')"
  >
  </el-date-picker>
</el-form-item>

`TS代码：`

private ruleForm: any = {
    createDate: [], // 创建时间
 };
 // 查询
submit(){
	// 接口参数 params
	const params = {
	  creatStarTime: this.ruleForm.creatDate
	    ? this.ruleForm.creatDate[0]
	    : "",
	  creatEndTime: this.ruleForm.creatDate
	      ? this.ruleForm.creatDate[1]
	      : "",
	}
},
// 表单重置
restForm(){
      this.$refs.ruleForm.resetFields()
}