Vue3+ElementPlus在el-table表格中显示时间的示例代码
作者：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表格显示时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！