Vue3+ElementPlus在el-table表格中显示时间的示例代码

 更新时间:2025年02月15日 11:40:56   作者:zjh胄瞳眬  
文章介绍了如何在Vue3+ElementPlus的el-table表格中显示时间,并提供了相关的代码示例,感兴趣的朋友一起看看吧

今二月迟来到,小臣在新的一年里,祝大家,一如既往,年年有鱼,岁岁平安,恭喜发财,身体健康,万事如意,幸福安康,大吉大利!!!

好,接下来让我们进入正题!!!

一、el-table显示截图如下:

二、vue界面部分代码如下: 

<div class="card">
      <el-table :data="tableDate" border  @selection-change="handleSelectionChange" >
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column prop="noveldatetime" label="更新时间" width="164" ></el-table-column>
        <el-table-column label="操作" width="175">
          <template #default="scope">
            <el-button type="primary" @click="handleClick(scope.row)">编辑</el-button>
            <el-button type="primary" @click="del(scope.row.novelid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
</div>
<div>
      <el-dialog v-model="dialogFormVisible" title="请填写信息" width="50%">
        <el-form :model="form">
          <el-form-item label="更新时间">
            <el-date-picker type="datetime" v-model="form.noveldatetime" autocomplete="off" placeholder="请输入时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
          </div>
        </template>
      </el-dialog>
</div>
<script>
export default {
  name: "Novels",
  //以下省略,本臣技术不成熟,去寻专业人士、文帖解决即可,狗头保命
}
</script>
<style scoped lang="scss">
.card {
  background-color: #FFFFFF;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .12);
  margin-top: 10px;
  margin-left: 10px;
}
.el-button--primary {
  background-color: #7f7f7f;
  border: 2.5px solid #d5d5d5;
}
.el-button--primary:hover {
  background-color: #d5d5d5;
  color: #000;
  border: 0;
  border: 1px solid #d5d5d5;
}
</style>
 

到此这篇关于Vue3+ElementPlus如何在el-table表格中显示时间的文章就介绍到这了,更多相关vue elementplus表格显示时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目在安卓低版本机显示空白的原因分析(两种)

    vue项目在安卓低版本机显示空白的原因分析(两种)

    本文给大家带来vue项目在安卓低版本机显示空白的原因分析,根据各自需求给大家带来了两种原因分析,大家可以参考下
    2018-09-09
  • vue 路由懒加载中给 Webpack Chunks 命名的方法

    vue 路由懒加载中给 Webpack Chunks 命名的方法

    这篇文章主要介绍了在 vue 路由懒加载中给 Webpack Chunks 命名的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue实现动态添加元素(可删除)

    vue实现动态添加元素(可删除)

    文章介绍了如何在Vue中动态添加和删除元素,通过使用Vue的响应式数据和v-for指令,可以轻松地实现这一功能,文章还详细讲解了如何处理元素的添加和删除事件,以及如何更新视图以反映这些变化
    2024-12-12
  • vue使用swiper的时候第二轮事件不会触发问题

    vue使用swiper的时候第二轮事件不会触发问题

    这篇文章主要介绍了vue使用swiper的时候第二轮事件不会触发问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue项目配置vuex并开启热更新方式

    vue项目配置vuex并开启热更新方式

    这篇文章主要介绍了vue项目配置vuex并开启热更新方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue3响应式高阶用法之shallowReadonly()使用

    Vue3响应式高阶用法之shallowReadonly()使用

    在前端开发中,Vue3的shallowReadonly() API允许开发者创建部分只读的状态,这对于保持顶层属性不变而内部属性可变的场景非常有用,本文将详细介绍 shallowReadonly() 的使用方法及其应用场景,具有一定的参考价值,感兴趣的可以了解一下
    2024-09-09
  • 使用Vue CLI配置代码压缩、加密和混淆功能示例代码

    使用Vue CLI配置代码压缩、加密和混淆功能示例代码

    这篇文章主要介绍了使用Vue CLI配置代码压缩、加密和混淆功能,通过配置 vue.config.js 文件,我们可以使用 Vue CLI 轻松实现对 Vue 应用程序代码的压缩、加密和混淆,需要的朋友可以参考下
    2023-06-06
  • 用vue写一个日历

    用vue写一个日历

    这篇文章主要介绍了如何利用vue写一个日历,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • Vue3使用echarts绘制特殊样式的折线图和柱状图

    Vue3使用echarts绘制特殊样式的折线图和柱状图

    这篇文章主要为大家详细介绍了Vue3如何使用echarts实现绘制一些特殊样式的折线图和柱状图,文中的示例代码讲解详细,需要的小伙伴可以了解下
    2024-02-02
  • vue实现登录时图形验证码

    vue实现登录时图形验证码

    这篇文章主要为大家详细介绍了vue实现登录时图形验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论