一个Java菜鸟的前端笔记
- 问题描述:
时间组件<el-time-picker>无论是新增和编辑均出现无法选择或无法滚动的情况,并且在返回详情时组件是能够成功回显已保存的时间数据的,但就是无法修改
组件
<el-form-item v-if="showMore" label="营业时间" prop="rangeTime">
<el-time-picker
is-range
value-format="HH:mm:ss"
v-model="listQuery.rangeTime"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
@blur="handleTime"
>
</el-time-picker>
</el-form-item>
设置默认值
created() {
if (this.$route.query.enterpriseId) {
this.addstatus = 1;
this.localData = {
enterpriseAddrX: this.$route.query.enterpriseAddrX,
enterpriseAddrY: this.$route.query.enterpriseAddrY,
};
this.latLng =
this.$route.query.enterpriseAddrX +
"," +
this.$route.query.enterpriseAddrY;
this.getDetail(this.$route.query.enterpriseId);
} else {
this.addstatus = 0;
this.$set(this.listQuery, "rangeTime", [new Date(2018, 12, 1, 9, 0), new Date(2018, 12, 1, 18, 0)]);
}
},
解决时间组件无法正常使用的重点就在于$set()
错误示例
总结:请使用$set()赋值,原因有待研究
另外吐槽一下,这个组件貌似必须设置初始值,否则无法选择。。。(至少在我这里是这样)
如有错误,欢迎批评指正!