关于Element中的日期选择器

问题描述

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

---

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()
}

• 下面是我刚开始的分析

无论this.ruleForm.creatDate是不是空数组，它都返回true，所以它永远都不会走到false。

---

• 偶尔发现

当我们点击重置按钮时：creatDate会被重置成初始化的空数组

当我们点击日期选择器清除时：createDate会被重置为null

• 这也正是三目运算符的用意了