添加商品分类功能

最新推荐文章于 2024-11-29 00:59:53 发布

原创最新推荐文章于 2024-11-29 00:59:53 发布 · 562 阅读

CC 4.0 BY-SA版权

该博客详细介绍了在Vue应用中如何实现商品分类的管理。包括如何获取并绑定`cat_name`、从级联选择框获取`cat_pid`以及计算`cat_level`。在添加分类时，首先重置表单数据，然后根据级联框的选择设置父级分类ID和分类级别，最后调用`addGoodsCateAPI`接口添加新的商品分类，并在成功后刷新分类列表并关闭添加对话框。

思路：
1.如何获取三个参数：
（1）cat_name:对el-input框双向绑定获取
（2）cat_pid:通过查找级联框最后一个数组元素获取
this.addForm.cat_pid=this.currentCateValue[this.currentCateValue.length-1]
（3）cat_level：通过级联框数据length值获取
this.addForm.cat_level=this.currentCateValue.length;
2.点击确定按钮调用添加分类接口
const res= await addGoodsCateAPI(this.addForm)

代码如下：
//每次打开添加分类对话框，重置数据：
//清空添加分类对话框数据
resetForm() {
//重置输入框
this.$refs.addFormRef.resetFields()
//重置级联框
this.currentCateValue=[]

  //重置addForm
  this.addForm.cat_pid=0;
  this.addForm.cat_level=0;


}

//确认添加商品分类
async addGoodsCateOk() {
console.log(‘addForm:’,this.addForm)
if(this.currentCateValue.length>0) {

    //父级分类id=currentCateValue数组的最后一个值
    this.addForm.cat_pid=this.currentCateValue[this.currentCateValue.length-1]

    //当前分类级别
     this.addForm.cat_level=this.currentCateValue.length;
  }else {
     this.addForm.cat_pid=0
     this.addForm.cat_level=0
  }

  //调接口添加分类
 const res= await addGoodsCateAPI(this.addForm)
 console.log('添加分类成功结果：',res)

 //刷新分类列表
this.getCateList();
 //隐藏添加分类对话框
 this.isAddCateDia=false;
}