我是歌謠 放棄很容易 但是堅持一定很酷

1前言

在我們的日常的開發過程中
不免會遇到需要操作同一頁面得情況

2需求

比如一個頁面 我們會有一個對應的一個表單

A:姓名:XXXX B：年齡:XXXX C:賬號:XXXX D：密碼:XXXX E:郵箱:XXXX XXXXX el-formel-input nameel-input ageel-input accountel-input passwordel-input email

要是你需要做一個驗證直接

el-form rules

基本的樣式和代碼展示就如上圖所示
一般的表單我們需要有一個el-table的表格行

el-tableel-table-column nameel-table-column ageel-table-column accountel-table-column passwordel-table-column email

獲取當前行的屬性我們可以

templatescope-slotscope-row

3解決方案

首先展示編輯頁面和新增頁面有兩種方案
彈出框和路由都是可以實現的提示

3.1.1dialog

el-dialog

3.1.2route

route

我們目前已第一種來說

el-dialog

3.1.3笨拙解決方案

route新建頁面 route編輯頁面 route查看頁面

4思考

這種方案是具有可行性 但是代碼未免有點過分冗余
于是轉換為新方案 還是需要進行的是頁面的一個判斷

route頁面新建|編輯|查看

這個時候思考的是頁面跳轉的判斷條件
首先查看和編輯和新建的一個判斷條件是否會存在id的屬性

4.1.1query傳參

routequery{:id}

對于當前的頁面有id的我們可以進行一個編輯
查看的操作 沒有id就是我們的新增操作

4.1.2 第三方插件傳參

可以采用store2 等進行頁面傳參 目的是對當前的頁面帶到下一個
頁面可以做一個判斷

4.1.3其余邏輯

對于其余邏輯的完善我們就需要分別查看和編輯的一個邏輯
兩者都是可以有id的輸入 我們可以在頁面進入的時候帶入一個參數
進入下一個頁面

skip（param1,param2）

當parma2為編輯則進行編輯邏輯 查看則顯示查看邏輯

其余邏輯

頁面的其余部分都是通過判斷獲得 代碼簡潔生動

5總結

我是歌謠 以上代碼均為簡寫 原創不易 歡迎一起討論學習前端知識,前端學習ing…

總結

以上是生活随笔為你收集整理的Vue+Element!一千字带你编写合理的编辑,查看,新建!的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。