快捷導(dǎo)航

Vue3+ElementPlus在el-table表格中顯示時(shí)間的示例代碼

更新時(shí)間：2025年02月15日 11:40:56 作者：zjh胄瞳眬

文章介紹了如何在Vue3+ElementPlus的el-table表格中顯示時(shí)間,并提供了相關(guā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="請?zhí)顚懶畔? width="50%">
        <el-form :model="form">
          <el-form-item label="更新時(shí)間">
            <el-date-picker type="datetime" v-model="form.noveldatetime" autocomplete="off" placeholder="請輸入時(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: