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页面级缓存解决方案feb-alive (下)

    浅谈Vue页面级缓存解决方案feb-alive (下)

    这篇文章主要介绍了浅谈Vue页面级缓存解决方案feb-alive(下),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 浅谈Vue插槽实现原理

    浅谈Vue插槽实现原理

    vue.js的灵魂是组件,而组件的灵魂是插槽。借助于插槽,我们能最大程度上实现组件复用。本文主要是对插槽的实现机制进行详细概括总结,在某些场景中,有一定的用处
    2021-06-06
  • Vue微信小程序和uniapp配置环境地址

    Vue微信小程序和uniapp配置环境地址

    在微信小程序中,可以使用全局配置和使用开发、体验、生产环境的地址,这篇文章主要介绍了Vue微信和uniapp配置环境地址,需要的朋友可以参考下
    2023-07-07
  • Vue.js使用计算属性缓存结果的方法

    Vue.js使用计算属性缓存结果的方法

    在Vue.js中,计算属性(computed properties)是组件的重要组成部分,它们根据组件的数据自动计算新的值,并在数据变化时自动更新,本文将探讨计算属性的缓存机制,并通过有趣的示例展示如何利用计算属性缓存结果,提升应用性能,需要的朋友可以参考下
    2025-03-03
  • Vue2.0中集成UEditor富文本编辑器的方法

    Vue2.0中集成UEditor富文本编辑器的方法

    本文给大家详细讲述了Vue2.0中集成UEditor富文本编辑器的方法以及相关注意事项做了讲述,有兴趣的朋友学习下。
    2018-03-03
  • vue使用echarts实现三维图表绘制

    vue使用echarts实现三维图表绘制

    这篇文章主要为大家详细介绍了vue如何在项目中使用echarts实现三维图表的绘制,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下
    2023-08-08
  • Vue实现boradcast和dispatch的示例

    Vue实现boradcast和dispatch的示例

    这篇文章主要介绍了Vue实现boradcast和dispatch的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11
  • Vue组件传值过程接收不成功的问题及解决

    Vue组件传值过程接收不成功的问题及解决

    这篇文章主要介绍了Vue组件传值过程接收不成功的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue页面中播放音频文件的方法详解

    Vue页面中播放音频文件的方法详解

    这篇文章主要为大家详细介绍了Vue实现页面中播放音频文件的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-02-02
  • vue iview 隐藏Table组件里的某一列操作

    vue iview 隐藏Table组件里的某一列操作

    这篇文章主要介绍了vue iview 隐藏Table组件里的某一列操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论