【Vue后台管理 四】Element UI表格CRUD操作

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

原文地址:https://www.cnblogs.com/CharmCode/p/13382164.html