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%;
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=[]
this.addForm.cat_pid=0;
this.addForm.cat_level=0;
}
async addGoodsCateOk() {
console.log('addForm:',this.addForm)
if(this.currentCateValue.length>0) {
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() {
if(this.selectKeys.length===3) {
return false
}
return true;
},
current_Cate_Id() {
if(this.selectKeys.length===3) {
return this.selectKeys[this.selectKeys.length-1]
}
return null;
}