Vue 解决联级选择器和添加商品

一.解决级联选择器cascader中的3问题

1. 可以选择cascader的级别

//template:
<el-cascader :props="defaultProps"></el-cascader> 
 //JS->data
 defaultProps: {
        checkStrictly:true
 },

2.隐藏小圆圈问题

/*核心思路：通过css隐藏小圆圈，并扩大小圆圈的显示范围,然后设置visibility为hidden*/

.el-cascader-panel .el-radio {
  position: absolute;
  width:100%;
  height:100%;
  /* border: 1px solid #f00;*/
  right:-10px;
}

.el-cascader-panel .el-radio .el-radio__input {
  visibility: hidden;
}

3. 解决点击某个级联项，不折叠问题

 //template:
 <el-cascader ref="cascaderRef"@change="handleChange"></el-cascader>
 
 //JS:
 //级联选择器选择完改变时触发
    async handleChange() {
     	this.$refs.cascaderRef.dropDownVisible=false
    },

4.修改第三方组件库样式穿透问题

​ 修改第三方样式不生效问题解决方案：

1. 保留现在style scoped标签外，在新建立一个不带scoped的style
2. 使用>>>实现样式穿透 不用less或sass情况下
3. 使用/deep/实现 通常用在less或sass中

二.添加商品分类功能

//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;
    }

三.添加商品分类参数

1.警告框组件

 <el-alert
   title="注意：只允许为第三级分类设置相关参数！"
   type="warning"
   show-icon
   :closable="false"
 >
 </el-alert>

2. tabs组件

 <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="many">
          <el-button :disabled="true" type="primary" size='mini'>添加参数		  </el-button>
      </el-tab-pane>
      <el-tab-pane label="静态参数" name="only">
          <el-button :disabled="true" type="primary" size='mini'>添加属性			</el-button>
      </el-tab-pane>
  </el-tabs>

3.计算属性

//computed

 computed:{
      //是否禁用
      isOk() {
          //length为3代码已经选择3级，则不禁用
          if(this.selectKeys.length===3) {
              return false
          }
        //如果不等3级，就禁用
          return true;
      },
      //当前分类id
   current_Cate_Id() {
       if(this.selectKeys.length===3) {
           //arr=[4,34,34,34,23]
           return this.selectKeys[this.selectKeys.length-1]  
   }
   return null;
}