您现在的位置是：网站首页> 编程资料编程资料

Vue element商品列表的增删改功能实现_vue.js_

2023-05-24 410人已围观

简介 Vue element商品列表的增删改功能实现_vue.js_

介绍 

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

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

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

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

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-cascader 级联选择器

商品信息vue富文本编辑器的配置

先执行安装语句：

在main.js 中注册 并引入样式

npm install vue-quill-editor import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // for snow theme import 'quill/dist/quill.bubble.css' // for bubble theme Vue.use(VueQuillEditor, /* { default global options } */)

在组件中使用