使用VUE自定义指令实现
<el-tree :check-strictly="isCheck" ref="tree" :data="data" show-checkbox node-key="detectorId" :default-expanded-keys="[]" default-expand-all :default-checked-keys="defKeys" :expand-on-click-node="false" :props="defaultProps" @check-change="handleCheckChange">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<i class="iconfont icon-jianceqi" v-if="data.isDet"></i>
<i v-else style="color:#F19F00;margin-right:10px;" class="iconfont icon-24gf-folder"></i>
{{ node.label }}
</span>
<span>
<el-button v-if="data.itemsNumber > 0 && data.isShow" type="text" size="mini" v-trigger class="wlh-textColor-red" @click="() => append(data)">
查看检测器
</el-button>
</span>
</span>
</el-tree>
methods(){
append(data) {
this.getDeteListFromGroup(data.organizationId, () => {
this.checkList.forEach(item => {
const newChild = {
organizationId: item.detectorId,
detectorId: item.detectorId,
organizationName: item.detectorName,
children: [],
isDet: true
};
if (!data.children) {
this.$set(data, "children", []);
}
data.children.push(newChild);
this.getPolicyOne();
});
});
// data = Object.assign({},data,{isShow:false})
data.isShow = false;
}
},
2.指令
directives: {
trigger: {
inserted(el, binging) {
// console.log(el)
// el.click()
$(el).trigger('click');//所以都触发一次,
}
}
}
3.回显赋值,el-tree的数据是动态添加的,所以回显的数据一定要在data数据追加后再回显被选中的数据
getInfo(){
this.isCheck = true //重点:回显之前一定要设置为true
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys(this.defKeys) //给树节点赋值回显
this.isCheck = false //重点: 赋值完成后 设置为false
})
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9486f0a82921811d6de11c463893cdb6.png)