前提条件:项目使用了el-tree-transfer穿梭框组件,但需求希望左边树结构不展开,右边树结构展开,但该组件配置项只能全展开或全收起
简单记录一下安装使用
1、安装
npm install el-tree-transfer -S
2、引入使用
<template>
<div>
<tree-transfer
id="test"
ref="test"
style="height:500px"
:title="['未配置', '已配置']"
:from_data="FromData"
:to_data="toData"
:defaultProps="{ label: 'label' }"
placeholder="请输入"
openAll
>
</tree-transfer>
</div>
</template>
<script>
import treeTransfer from 'el-tree-transfer'
export default {
components:{
treeTransfer
},
data() {
return {
FromData:[...],
toData:[...]
};
},
}
</script>
在el-tree-transfer组件中使用openAll控制是否展开全部,默认值为false,所以配置了openAll的情况下是全部展开
该组件并没有直接提供配置单边展开或收回的配置,所以想要实现需求只能自定义逻辑
首先需要获取左边树结构的实例,由于不能直接拿到,所以只能通过el-tree-transfer的实例去找
找到第一个$el:div.el-tree,即表示当前的$el所在的这是对象实例就是左边树结构的实例(可以看到左边树结构的实例是当前组件的第一个$children实例下的第二个$children实例,若加上filter属性的话,就是第三个$children实例,所以需要注意顺序)
然后找到root或store.root属性,递归遍历其childNodes,将每个节点的expanded属性改为false(因为初始化是全部展开的,所以按需求,这里需要让左边树结构节点全收回)
this.$nextTick(()=>{
console.log(this.$refs.test);
let ref = this.$refs.test.$children[0].$children[1]
ref.root.childNodes.forEach((node, index) => {
this.closeNode(node);
})
})
closeNode(node) {
node.expanded = false;
if (node.childNodes) {
node.childNodes.forEach(child => {
this.closeNode(child);
});
}
},
同理,如果是没有设置全展开,那就需要将右边树结构全展示
这里的右边树结构的对象实例就是在当前组件的第一个$children实例下的第五个$children实例(也就是最后一个)
this.$nextTick(()=>{
console.log(this.$refs.test);
let ref = this.$refs.test.$children[0].$children[5]
ref.root.childNodes.forEach((node, index) => {
this.openNode(node);
})
})
openNode(node) {
node.expanded = true;
if (node.childNodes) {
node.childNodes.forEach(child => {
this.openNode(child);
});
}
},
最后实现效果如下:
坚持就是胜利!