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

目录

• 介绍 
• 基本信息
• 上传主图
• 商品信息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-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 } */)

在组件中使用

最后提交数据

        
          
            上传商品
          
        

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