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

最新推荐文章于 2023-11-17 10:48:58 发布

原创最新推荐文章于 2023-11-17 10:48:58 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue #elementui

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

页面代码

<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;
         })
     },
    }