需求:需要进行一个时间区间的选择

遇到的问题:需要设置默认值,只需要拿到小时和分的时间格式。

<el-time-picker
                is-range
                style="width:500px"  //必须设置宽度,不然会导致刷新或初始化的时候撑不开这个组件
                :disabled="isDisabled"
                v-model="form.time"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                value-format="HH:mm"
                format="HH:mm"
              ></el-time-picker>

必须设置默认的时间,不然无法进行时间的选择,组件里显示的为空数据

data(){
    return {
        form:{
            time: [new Date(2020, 1, 1, 9, 0), new Date(2020, 12, 31, 18, 0)],
        }
    }
}

如果设置有默认事件,直接用后台的返回事件,会导致传给后台的格式不正确,所以要对这种情况进行单独的时间格式化

if (typeof this.form.time[0] == "object") {
            startTime = moment(this.form.time[0]).format("HH:mm");
            endTime = moment(this.form.time[1]).format("HH:mm");
          } else {
            startTime = this.form.time[0];
            endTime = this.form.time[1];
    }
}

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐