vue使用element-ui的日期选择器,框内默认显示当前时间且不可修改

除了菜还是菜

于 2020-12-31 10:47:36 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： java vue elementui

本文链接：https://blog.youkuaiyun.com/wjw_de_java/article/details/112004230

此篇博客介绍了如何在Vue组件中使用Element UI的el-date-picker组件，实现日期时间选择器，并演示了如何在mounted阶段动态设置默认评估日期。同时，展示了如何通过_v-if指令控制其显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面代码

<el-row type="flex" class="row-bg" justify="start" v-if="dataShow">
                <el-col :span="11" :offset="0">
                    <el-form-item label="评估时间" prop="assessDate" label-width="130px">
                        <el-date-picker
                                :disabled="true"
                                v-model="updateForm.assessDate"
                                type="datetime"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                </el-col>
            </el-row>


return {
				updateForm{},
                dataShow:true,
                }

mounted() {
            const _this = this;
            _this.getdatatime();
        },
methods: {
 getdatatime(){
         const _this = this;
         //默认显示今天
         _this.dataShow = false;
         _this.$nextTick(()=>{
             _this.updateForm.assessDate = new Date();
             _this.dataShow = true;
         })
     },
    }