文件有2个关键点
<template>
<section class="main-content">
<section class="content-body pall15" v-if="showRule">
<div class="eboss-row">
<div class="eboss-col col-flex"></div>
<div class="eboss-col col-flex"></div>
<div class="eboss-col col-flex">
<label class="form-label">数据权限:</label>
<div class="form-control">
<changedatarule @sendMsg="reseiveMsg" :channelList="channelList" :channel="channel"></changedatarule>
</div>
</div>
</div>
</section>
</section>
</template>
<script>
export default {
mixins: [mixin],
data() {
var vue = this;
return {
props:{
checkStrictly: true,label:'name',value:'wholeId',children:'children' ,leaf:'leaf',
lazy: true,
lazyLoad (node, resolve) {
if(node.data&&node.data.id){
vue.axiosPost(`bbc/childDepartment?departmentId=${node.data.id}`).then(res => {
if (res.success) {
let data=res.model.length?res.model.map(item=>{
if(item.areaLevel>=6){
item.leaf=true
}
return item
}):[]
resolve(data);
} else {
vue.$alert(res.errorMessage, '提示');
}
})
}
}
},
options: [],
opValue:[],
showRule:true,
}
},
watch: {
handlerValue() {
if (this.$refs.addZh) {
this.$refs.addZh.dropDownVisible = false; //监听值发生变化就关闭它
}
},
},
mounted(){
setInterval(function() {
document.querySelectorAll(".el-cascader-node__label").forEach(el => {
el.onclick = function() {
if (this.previousElementSibling) this.previousElementSibling.click();
};
});
}, 1000);
this.serchData()
},
methods: {
changeList(val){
console.log(val,this.opValue)
console.log(this.$refs.addZh.getCheckedNodes())
let node =this.$refs.addZh.getCheckedNodes()[0]
console.log(node,'ss',this.props)
// if(val.length){
// let id = val[val.length-1]
// let ids=id.split('-')
// this.axiosPost(`/pms/center/getChildrenAreaById?areaId=${ids[ids.length-1]}`).then(res => {
// if (res.success) {
// let data=res.model.length?res.model.map(item=>{
// if(item.areaLevel<6){
// this.$set(item,'children',[])
// }
// if(item.areaLevel>=6){
// item.leaf=true
// }
// return item
// }):[]
// if(data.length){
// this.serach(this.options2,id,data)
// }
// } else {
// this.$alert(res.errorMessage, '提示');
// }
// })
// }
if(node.data&&node.data.id){
this.axiosPost(`bbc/childDepartment?departmentId=${node.data.id}`).then(res => {
if (res.success) {
let data=res.model.length?res.model.map(item=>{
if(item.areaLevel>=6){
item.leaf=true
}
return item
}):[]
this.serach(this.options,node.data.id,data)
} else {
this.$alert(res.errorMessage, '提示');
}
})
}
},
serach(val,id,data){
val.map(item=>{
if(item.id===id){
this.$set(item,'children',data)
}else if(item.children&&item.children.length){
return this.serach(item.children,id,data)
}
return item
})
},
//获取组织
serchData(){
this.axiosPost(`bbc/department`).then(res => {
if(res.success){
this.options=res.model
}else{
this.$alert(res.errorMessage+`(${res.errorCode})`,'提示', {showClose:false})
}
})
}
}
}
</script>
<style scoped lang="less">
</style>
1.错误写法
此时直接用set方法添加导致下一级数据不能渲染
即使使用$nextTick也是一样的
必须使用递归查找进行递归添加才可以渲染
changeList(val){
console.log(val,this.opValue)
console.log(this.$refs.addZh.getCheckedNodes())
let node =this.$refs.addZh.getCheckedNodes()[0]
console.log(node,'ss',this.props)
if(node.data&&node.data.id){
this.axiosPost(`bbc/childDepartment?departmentId=${node.data.id}`).then(res => {
if (res.success) {
let data=res.model.length?res.model.map(item=>{
if(item.areaLevel>=6){
item.leaf=true
}
return item
}):[]
this.$set(node,'children',data)
// this.$nextTick(()=>{
// this.$set(node,'children',data)
// })
} else {
this.$alert(res.errorMessage, '提示');
}
})
}
},
2。点击字体跟点击chkeck保持一致
当我们都写完了的时候,but,特么这官网这个有两个问题:
点击圆圈后理想是自动收起下拉,但是他这个也没有
而且只能点击圆圈才能选中,点击文字 label 没有效果
于是,开始了艰辛的百度历程: 最后依然没有找到答案,好像很少人用这种,级联每一级都可以选择的。。。用得多的就是选中最后一级,像省级联动之内的
打铁还需自身硬,只有自己去慢慢看了。后面终于解决了这两个问题:
先看第一个问题,让他收起来,这个好像不难,确实不难:
设置每次监听值变化的时候,把 dropDownVisible 属性设置为 false 即可。(虽说简单,但是这个属性我找了半天,官网根本没有说~~~~(>_<)~~~~ )
watch: {
handlerValue() {
if (this.$refs.addZh) {
this.$refs.addZh.dropDownVisible = false; //监听值发生变化就关闭它
}
},
},
在看看第二个问题,点击label 也每次让他选中,卧槽,无从下手,后面怎么解决的说来话长,看实现代码吧。
mounted(){
setInterval(function() {
document.querySelectorAll(".el-cascader-node__label").forEach(el => {
el.onclick = function() {
if (this.previousElementSibling) this.previousElementSibling.click();
};
});
}, 1000);
}