当前位置: 首页 > Web前端 > vue.js

【Vue后台管理4】ElementUI表格CRUD操作

时间:2023-03-31 14:33:49 vue.js

Vue2ElementUI表格CRUD操作代码很久以前写的,现在才补上博客。后台管理中最常见的就是表操作。以下示例是一个列表CRUD操作。效果展示与实现首先我添加的和列表其实是一个路由,只不过是通过一个变量来控制的。这是我的想法,以路由区分。首先我写了两个组件,一个是CategoryListView展示页面,一个是CategoryView添加修改页面。添加类别

返回列表
使用一个变量showCategoryList:true默认显示列表,点击切换显示和添加,还有一个细节是编辑内容。其实我就是用了这个AmodifyCateId:null变量,编辑的时候给cateId赋值,正常添加的时候设置为null,然后添加组件判断cateId是否有值,如果有就显示为edit,如果没有,将添加如下。methods:{switchView(){this.showCategoryList=!this.showCategoryListthis.modifyCateId=null},editCate(cate_id){this.modifyCateId=cate_idthis.showCategoryList=!this.showCategoryList}}说实话,这个后台例程CRUD,没什么难度,看文档写就可以了。感觉后面没有更新的动力了。哦,对了,还有一个富文本编辑器可以添加,以后添加商品详情的时候再添加。Demo详细代码GitHub地址见个人网站https://www.charmcode.cn/arti...