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

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

1.1 可以选择cascader的任意级别

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

1.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;
}

1.3 解决点击某个级联项，不折叠问题（dropDownVisibl设置为false）

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

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

修改第三方样式不生效问题解决方案
1.保留现在style scoped标签外，在新建立一个不带scoped的style
2.使用>>>实现样式穿透 不用less或sass情况下
3.使用/deep/实现  通常用在less或sass中

2.添加商品分类功能

思路：
 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;
    }

3.添加商品分类参数

3.1 警告框组件

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

3.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.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;

      }