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/arti…