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

Vue2 Element UI表格CRUD操作

代码很早就写了,博客现在才补上,后台管理中最常见的就是表格操作,我下面这个例子就是列表的CRUD操作。

效果展示

【Vue后台管理 四】Element UI表格CRUD操作_第1张图片

【Vue后台管理 四】Element UI表格CRUD操作_第2张图片

实现

首先我新增和列表其实是一个路由,只不过是用了一个变量控制,我这是一个思路,还有就是用路由区分开来。

首先我用写了两个组件,一个是CategoryListView展示页面,一个是CategoryView添加修改页面。

新增分类
返回列表

里面用了一个变量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...

你可能感兴趣的:(vue.js,element-ui)