el-date-picker的常规使用

发表于 更新于 分类于 ， ， 阅读次数：

HTML 页面部分

1
2
3
4
5
6
7
<el-form-item label="时间" prop="testDate">
  <el-date-picker 
    v-model="testDate"
    tyep="daterange"
    start-placeholde="开始日期"
    end-placeholde="结束日期" />
</el-form-item>

JavaScript 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
export default {
  data() {
    startTime = '',
    endTime = ''
    ....
  }
  ....
  computed: {
    testDate: {
      get() {
        return [this.startTime, this.endTime]
      },
      set(val) {
        // 此处需要对 val 进行判空，因为 el-date-picker 的清空按钮点击之后会将 testDate 置为 null
        if (val) {
          this.startTime = dateFormate(val[0])
          this.endTime = dateFormate(val[0])
        } else {
          this.startTime = ''
          this.endTime = ''
        }
      }
    }
  }
  method: {
    reset() {
       this.startTime = ''
       this.endTime = ''
     }
  }
}