13-el-tree-transfer自定义一键展开或一键收回

前提条件：项目使用了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);
            });
        }
    },

最后实现效果如下： 

坚持就是胜利！