Vue框架在项目开发中如何实现组件的复用？

本文共计1285个文字，预计阅读时间需要6分钟。

目录介绍基本信息上传主图商品信息Vue富文本编辑器配置最后提交数据介绍整体和用户列表功能步骤：- 面包屑导航- 大卡片组件- 搜索商品- 添加商品- 表格渲染数量

目录

• 介绍
• 基本信息
• 上传主图
• 商品信息vue富文本编辑器的配置
• 最后提交数据

介绍

整体和用户列表 类似 功能步骤有：

• 面包屑导航
• 外部是大的卡片组件
• 搜索商品 添加商品
• 表格渲染数据
• 作用域插槽用于 操作按钮
• 分页器组件的使用

不一样的点：之前编辑信息 新增信息是 弹出对话框编辑 但商品信息内容较多 我们跳转到一个组件、并且进行商品编辑的时候要进行路由传参 来渲染初始数据

点击添加商品按钮时跳转到新增商品组件对应路径：

addGoods(){ this.$router.push('/goods/add') }

点击编辑商品按钮时跳转到编辑商品组件对应路径 并且传入id

ToEditGoods(id){ this.$router.push(`/goods/edit/${id}`) }

新增商品和编辑商品组件布局一致只是新增商品 不用 传参请求数据

我们以编辑商品为例

在设置路由对应关系的时候 预留占位符

{ path:'/goods', component:GoodsList }, { path:'/goods/add', component:GoodsAdd }, { path:'/goods/edit/:id', component:GoodsEdit }

第一步 先使用组件进行页面布局：

主要使用到了 el-steps 步骤条组件 和 el-tabs 标签页组件的联动 使他们步长一致 使用共同的

active 步骤条的active 动态绑定 到 activeIndex上

当标签页发生切换时 根据name 赋值给 activeIndex

async handleClick(){ this.activeIndex = this.activeName * 1 // 选择了商品(动态)参数选项 },

这样 两个组件就可以联动展示了

标签页组件其实是包裹在 el-form 当中方便统一提交给服务器

接下来就是表单内部 组件渲染 表单验证了

基本信息

组件渲染el-input 数据绑定 v-model 类型限制 tpye=‘number’ prop合法值验证

这里需要自定义验证的是 商品价格不能小于0 商品数量必须是整数

必填就可以直接使用自带的

基本信息中还有一个要点：分类选择

<el-form-item label="选择商品分类"> el-cascader 级联选择器 <el-cascader 默认选定的值是根据id请求过来的分类数组 v-model="AddGoodsForm.goods_cat" style="width: 400px" 数据来源：cateLists 一进入页面请求过来的 :options="cateLists" 有清空按钮 clearable 禁用 编辑页面 不让修改分类 disabled 级联选择器的相关规则 :props="CSet" 选择发生改变时 执行的回调 @change="handleChange"></el-cascader> </el-form-item> <script> 数据来源： async getAllCate(){ const {data:res} = await this.$127.0.0.1:8888/api/private/v1/upload' on-preview 点击文件列表中已上传的文件时的钩子 点击出现对话框显示放大预览图 handlePreview2(file){ this.PreviewPic=file.response.data.url // 显示图片的地址 this.Preview = true // 决定对话框显示的布尔值 } on-remove 文件列表移除文件时的钩子 handleRemove(file){ //1.获取将要删除的图片临时路径 const fileUrl = file.response.data.tmp_path //2.从pics 数组中，找到这个图片对应的索引值 let aaa = this.AddGoodsForm.pics.findIndex(value => value === fileUrl) console.log(aaa) //3.调用数组 splice 方法 把图片信息对象从pics 数组中移除 this.AddGoodsForm.pics.splice(aaa,1) console.log(this.AddGoodsForm.pics) } on-success 文件上传成功时的钩子 async handleSuccess(response){ // 找出定义一下 新上传文件的路径地址 const NewPicUrl = response.data.tmp_path // push 到预留表单位中 this.AddGoodsForm.pics.push(NewPicUrl) console.log(this.AddGoodsForm.pics) // const {data:res} = await this.$www.wsg3096.com/gangback/pub/asdc1.png" :image-size="320" description="确定所有数据添加完毕后就可以提交啦！"> <el-button type="primary" icon="el-icon-success" @click="ToGoods">上传商品</el-button> </el-empty> </el-tab-pane> <script> // 确定上传的按钮 async ToGoods(){ this.$refs.AddGoodsFormRef.validate(async valid =>{ if (!valid) return this.$Msg.error('请检查下各项数据是否规范！') // 执行添加业务的逻辑 先深拷贝一下 防止改变 级联选择器 const form = _.cloneDeep(this.AddGoodsForm) // 处理当前商品所属ID 服务器要求 ，分割的字符串 form.goods_cat = form.goods_cat.join(',') // 请求过来的数据保存到ManyData OnlyData 展示 返回去的时候 还用服务器的数据就行 form.attrs = [...this.ManyData,...this.OnlyData] // console.log(form) const {data : res} = await this.$http.put(`goods/${this.NowEditId}`,form) if (res.meta.status !== 200) return this.$Msg.error('编辑商品失败！') this.$Msg.success('编辑商品成功！') await this.$router.push('/goods') }) } </script>

到此这篇关于Vue element商品列表的增删改功能实现的文章就介绍到这了,更多相关Vue element商品列表内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！