Vue2 Element UI表格CRUD操作

程式碼很早就寫了，部落格現在才補上，後臺管理中最常見的就是表格操作，我下面這個例子就是列表的CRUD操作。

效果展示

實現

首先我新增和列表其實是一個路由，只不過是用了一個變數控制，我這是一個思路，還有就是用路由區分開來。

首先我用寫了兩個元件，一個是CategoryListView展示頁面，一個是CategoryView新增修改頁面。

<div v-show="showCategoryList" class="PageList">
            <el-button type="primary" @click="switchView">
              新增分類
            </el-button>
            <category-list-view @editCate="editCate" />
          </div>
          <div v-show="!showCategoryList" class="add-category">
            <el-button type="primary" @click="switchView">
              返回列表
            </el-button>
        <category-view :modify-cate-id="modifyCateId" />
   </div>
 

裡面用了一個變數showCategoryList: true預設展示列表，點選切換展示新增，還有一個細節就是編輯內容，
其實這個我用了一個modifyCateId: null變數, 編輯的時候賦值cateId，正常新增的時候置為空，然後新增元件裡面判斷cateId是否有值，如果有就顯示為編輯，
沒有就為新增，如下。

methods: {
      switchView() {
        this.showCategoryList = !this.showCategoryList
        this.modifyCateId = null
      },
      editCate(cate_id) {
        this.modifyCateId = cate_id
        this.showCategoryList = !this.showCategoryList
      }
    }
 

總結

說實話，這個後臺常規的CRUD，沒有難度，看看文件就能寫，我感覺我後面沒有更新下去的動力了，哦，對還有就是富文字編輯器新增，後面新增商品詳情時加上。

演示詳細程式碼GitHub地址

見個人網站 https://www.charmcode.cn/article/2020-07-26_vue_tab