【VUE项目实战】41、添加商品分类功能(二)
接上篇《40、添加商品分类功能(一)》
上一篇我们实现了部分添加商品分类的功能,本篇我们来继续处理添加分类时表单相关的内容。
一、优化上一章剩余的小问题
首先我们先处理一下选中之后想要清除选中的数据的问题,给el-cascader组件添加一个clearable属性即可:
<el-cascader class="cascader"v-model="selectedKeys":options="parentCateList":props="cascaderProps"@change="parentCateChanged()"clearable>
</el-cascader>
这样选中数据之后,可以按小叉叉清除选中的数据。
然后我们选择分类的时候,可能会选择一级,也可能会选择二级,此时我们需要通过props.checkStrictly = true来设置父子节点取消选中关联,从而达到选择任意一级选项的目的:
//指定级联选择器的配置对象
cascaderProps: {value: 'cat_id',label: 'cat_name',children: 'children',leaf: 'cat_level',expandTrigger: 'hover', //悬浮显示checkStrictly: true //可以选择任一级选项
},
效果:
二、根据选项动态处理表单
下面我们来处理一下添加分类时的表单数据。我们要处理以下几种情况:
1、假设我们填写的分类名称是“a”,然后不选择任何的父级分类:
该情况下表单的数据应该为下面的格式:
addCateForm: {//将要添加的分类的名称cat_name: 'a',//父级分类的IDcat_pid: 0,//当前分类等级,默认要添加的是1级分类cat_level: 0
}
2、如果我们填写的分类名称是“a”,父级分类选择“大家电”:
该情况下表单的数据应该为下面的格式:
addCateForm: {cat_name: 'a',cat_pid: 1,cat_level: 1
}
所以我们要根据用户选择的父级分类的情况,适时变化addCateForm表单的数据。这里就用到了之前在el-cascader中绑定的change函数“parentCateChanged()”:
<el-cascader class="cascader"v-model="selectedKeys":options="parentCateList":props="cascaderProps"@change="parentCateChanged()"clearable>
</el-cascader>
我们在change函数中编写一个判断,只要级联选中项发生了变化,selectedKeys数组肯定也发生了变化,如果数组里面id的长度等于0,说明没有选择父级分类,如果大于0了,证明选了父级分类:
//选择项发生变化触发这个函数
parentCateChanged(){console.log(this.selectedKeys);//如果 selectKeys数组的length大于0,证明选中了父级分类//如果 selectKeys的length小于0,证明没有选择父级分类if(this.selectedKeys.length>0){//获取父级分类的IDthis.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1];//为当前分类的等级赋值this.addCateForm.cat_level = this.selectedKeys.length;return;}else{//没有选择父级分类,此时层级重置为0,父级id为0//获取父级分类的IDthis.addCateForm.cat_pid = 0;//为当前分类的等级赋值this.addCateForm.cat_level = 0;}
}
这里父级分类取selectedKeys中最末级的选择,因为最末级的是最深一层的级联被选中的id,这个才是当前要加的分类的上一级分类:
然后该分类的层级,实际上就是selectedKeys的length长度,因为选了几层,selectedKeys数组就记录几个ID。
我们测试一下,找到“确定”按钮,绑定一个名为“addCate”的click函数:
<span slot="footer" class="dialog-footer"><el-button @click="addCateDialogVisible = false">取 消</el-button><el-button type="primary" @click="addCate()">确 定</el-button>
</span>
然后编写该方法,在里面打印addCateForm对象:
//点击按钮,添加新的分类
addCate(){console.log(this.addCateForm);
}
刷新页面,此时我们不选择任何分类,点击确定查看打印数据:
可以看到分类等级和父级ID都是0。
然后我们选择“大家电”,点击确定查看打印数据:
可以看到分类等级为1(二级分类),父级ID为1。
然后我们选择“大家电/电视”,点击确定查看打印数据:
可以看到分类等级为2(三级分类),父级ID为3 。
到这里,我们就将添加分类时的表单数据随选项的变化而变化的逻辑处理完毕了。
三、处理对话框的关闭事件
我们可以发现,目前当我们在添加分类对话框选择完数据,关闭对话框后,再次打开对话框,原来的数据还在上面,没有清空。我们要实现关闭对话框清空上次选择的数据。
我们要监听对话框组件dialog的close事件。我们为其绑定一个名为“addCateDialogClosed”的close函数:
<!-- 添加商品分类的对话框 -->
<el-dialogtitle="添加分类":visible.sync="addCateDialogVisible"width="50%"@close="addCateDialogClosed()"><!-- 中间代码此处省略... -->
</el-dialog>
然后在方法区编写该函数:
//监听对话框的关闭时间,重置表单数据
addCateDialogClosed(){//拿到表单的引用,调用重置方法this.$refs.addCateFormRef.resetFields();//清除级联选择器中选择的数据this.selectedKeys = [];//将表单的父级ID和分类级别重置this.addCateForm.cat_pid = 0;this.addCateForm.cat_level = 0;
}
效果:
至此,添加分类表单的所有处理工作全部完成。
下一篇我们讲解提交添加分类表单到后台数据库的操作。
参考:黑马程序员(www.itheima.com)Vue项目实战教学视频
转载请注明出处:https://blog.csdn.net/u013517797/article/details/123610740
【VUE项目实战】41、添加商品分类功能(二)相关推荐
- 【VUE项目实战】56、商品添加功能(六)-提交添加的商品
接上篇<55.商品添加功能(五)-商品内容模块> 上一篇我们完成了商品内容编辑模块的开发,也即是完成了商品所有的信息编辑,本篇我们就来开发提交商品所有信息到后台的功能. 一.要实现的效果 ...
- 【VUE项目实战】37、商品分类功能介绍和基本结构搭建
接上篇<36.用户分配角色功能> 上一篇我们完成了为用户分配角色的功能,结束了权限管理模块.本篇我们开启新模块"分类管理"的开发,先进行模块的介绍和基本结构的搭建. 一 ...
- 【VUE项目实战】54、商品添加功能(四)-商品图片上传模块
接上篇<53.商品添加功能(三)-商品参数及属性模块> 上一篇我们完成了商品参数和商品属性面板的开发,本篇我们来完成商品图片上传模块的开发. 一.要实现的效果 我们在商品图片页签,需要放置 ...
- 【VUE项目实战】59、订单的物流信息查询功能
接上篇<58.订单修改收货地址的功能> 上一篇我们完成了订单列表的修改收货地址功能,本篇我们来实现订单的物流信息查询功能. 一.要实现的效果 我们要实现点击操作列的"物流进度&q ...
- vue 动态添加class_前端开发:Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容 项目环境搭建 路由导航实现 ListVie ...
- 【VUE项目实战】32、权限管理-实现角色列表
接上篇<31.权限管理-实现权限列表> 上个阶段我们完成了权限管理模块,本篇我们来介绍用户.角色和权限三者的关系,并完成角色管理列表模块. 一.权限管理业务分析 通过权限管理模块,控制不同 ...
- 【VUE项目实战】9、创建登录组件并绘制布局
接上篇<8.登录与退出功能开发准备(二)> 上一篇讲解了登录模块的开发的前置准备工作,本篇来正式开发登录模块. 一.创建登录组件并渲染 下面我们创建一个根组件,并将根组件渲染到App根组件 ...
- 【VUE项目实战】1、学习目标以及概述
之前我们分别学习了ES6和Vue的基础,下面新开启的系列,是从0开始通过Vue搭建一个电商管理系统,从而学习Vue的具体实战. 以下博文记录,均参考黑马程序员(www.itheima.com)Vue项 ...
- Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
最新文章
- 小猿圈web前端之jQuery抽奖系统
- 每日一皮:和女朋友争吵与阅读软件许可协议之间的共同点...
- httpclient解析https网页
- 绝地求生 android版支持蓝牙吗,《绝地求生》吃鸡必须要顶配吗?这些配置也能畅玩...
- 26. 删除排序数组中的重复项 golang
- centos部署python flask_用Dockerfile部署你的Flask Web应用
- Linux新安装后设置root密码
- C语言版回字四种写法的一个例子——数组下标访问
- Kvm虚拟化性能测试与性能优化实践
- php定时器使用,PHP实现javascript的定时器
- LTE 注网流程log分析
- asc在mysql里面的意思_mysql数据库 asc函数
- 【开发工具集】重复代码检查工具——simian
- net use 命令使用
- php 图片裁剪后保存,php – 如何保存裁剪的图像
- WPF界面美化(整体作用到控件),一步步教你使用FirstFloor.ModernUI
- linux rescue 硬盘,深入浅出的了解Linux rescue
- Android高级开发进阶图谱
- 报错解决:Lammps中lmp_mpi编译出错
- java csvwriter 追加_CSV文件每行的末尾追加写数据