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，沒有難度，看看文檔就能寫，我感覺我后面沒有更新下去的動力了，哦，對還有就是富文本編輯器添加，后面添加商品詳情時加上。