Vue3+ElementPlus在el-table表格中顯示時(shí)間的示例代碼
今二月遲來到,小臣在新的一年里,祝大家,一如既往,年年有魚,歲歲平安,恭喜發(fā)財(cái),身體健康,萬事如意,幸福安康,大吉大利?。?!
好,接下來讓我們進(jìn)入正題?。?!
一、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="更新時(shí)間" 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="請(qǐng)?zhí)顚懶畔? width="50%"> <el-form :model="form"> <el-form-item label="更新時(shí)間"> <el-date-picker type="datetime" v-model="form.noveldatetime" autocomplete="off" placeholder="請(qǐng)輸入時(shí)間" 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", //以下省略,本臣技術(shù)不成熟,去尋專業(yè)人士、文帖解決即可,狗頭保命 } </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>
到此這篇關(guān)于Vue3+ElementPlus如何在el-table表格中顯示時(shí)間的文章就介紹到這了,更多相關(guān)vue elementplus表格顯示時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目在安卓低版本機(jī)顯示空白的原因分析(兩種)
本文給大家?guī)韛ue項(xiàng)目在安卓低版本機(jī)顯示空白的原因分析,根據(jù)各自需求給大家?guī)砹藘煞N原因分析,大家可以參考下2018-09-09vue 路由懶加載中給 Webpack Chunks 命名的方法
這篇文章主要介紹了在 vue 路由懶加載中給 Webpack Chunks 命名的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04vue實(shí)現(xiàn)動(dòng)態(tài)添加元素(可刪除)
文章介紹了如何在Vue中動(dòng)態(tài)添加和刪除元素,通過使用Vue的響應(yīng)式數(shù)據(jù)和v-for指令,可以輕松地實(shí)現(xiàn)這一功能,文章還詳細(xì)講解了如何處理元素的添加和刪除事件,以及如何更新視圖以反映這些變化2024-12-12vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問題
這篇文章主要介紹了vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue3響應(yīng)式高階用法之shallowReadonly()使用
在前端開發(fā)中,Vue3的shallowReadonly() API允許開發(fā)者創(chuàng)建部分只讀的狀態(tài),這對(duì)于保持頂層屬性不變而內(nèi)部屬性可變的場(chǎng)景非常有用,本文將詳細(xì)介紹?shallowReadonly()?的使用方法及其應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)圖形驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03