zoukankan      html  css  js  c++  java
  • 使用element ui 日期选择器获取值后的格式问题

    1、在项目中用到了element ui里面的日期选择器,发现有格式问题,如下代码:

    <template v-if="scope.row.edit">
        <el-date-picker
        class="stra-date-picker"
        size="small"
        v-model="scope.row.publish_time"
        type="date"
        placeholder="请选择日期">
      </el-date-picker>
    </template>
    <span v-else class="db ell" :title="scope.row.publish_time">{{ scope.row.publish_time }}</span>
     

    选择日期的时候格式并没有问题,如下:

    但是由于它的格式问题我们实际上获取到数据格式是:

    2、知道问题后查看官方文档,有这么一段描述:

    3、解决方案1(不适用于我这个项目,但是适用于大部分的项目)

    由于在官方文档中,有提到可以使用change

    <el-date-picker type="date" v-model="time" @change="formatTime" format="yyyy-MM-dd" placeholder="请选择日期"></el-date-picker>
     

    然后在methods中,添加一个方法即可,代码如下:

    formatTime(val) {
        this.time=val;
    }

    这个方法是直接将v-model里面的值改变,但由于我的项目日期里面v-model的值,是整个动态循环绑定的,不能知道当前的time值,所以可用下面的方法2

    4、解决方法2(适用于我的项目,个人认为更加方便简洁)

    代码如下:

    <template v-if="scope.row.edit">
      <el-date-picker
        class="stra-date-picker"
        size="small"
        v-model="scope.row.publish_time"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择日期">
      </el-date-picker>
    </template>
    <span v-else class="db ell" :title="scope.row.publish_time">{{ scope.row.publish_time }}</span>

    效果如下:

    获取到的数据如下:
     

    主要是用了value-format,官方文档解释如下:

    戳这里✔️ 日期格式  

  • 相关阅读:
    javaWeb快速入门+——初体验-HelloWorld
    简单理解Linux系统的挂载是什么鬼
    STM32MP157 Cortex®-M4高性能系列MCU
    常见六种锂电池特性及参数对比
    IIC通信详解
    stm32微秒延时问题
    STM32 HAL库实现微秒级别延时
    开关电源波纹的产生、测量及抑制
    图解DIY 1pA超微电流测试器
    stm32
  • 原文地址:https://www.cnblogs.com/forward-wuyi/p/9340634.html
Copyright © 2011-2022 走看看