vue + ant design 实现左右两边对应树节点的同时展开、关闭。

一、效果展示

• 说明：点击左边或右边某个树节点，对应树节点也会跟着展开、收起。
• 举例1：当前状态下，点击左侧树节点【2】，该节点收起，右侧树节点【B】也会收起。
• 举例2：当前状态下，点击右侧树节点【A-a】，该节点展开，左侧树节点【1-0】也会展开。

二、代码实现

<template>
  <div class="box">
    <a-row class="box-height">
      <a-col :span="12" class="box-border">
        <a-tree :expanded-keys="leftExpandedKeys" :tree-data="leftTreeData" @expand="onLeftExpand" />
      </a-col>
      <a-col :span="12">
        <a-tree
          :expanded-keys="rightExpandedKeys"
          :tree-data="rightTreeData"
          @expand="onRightExpand"
        />
      </a-col>
    </a-row>
  </div>
</template>
<script>
const leftTreeData = [
  {
    title: '1',
    key: '1',
    children: [
      {
        title: '1-0',
        key: '1-0',
        children: [
          { title: '1-0-0', key: '1-0-0' },
          { title: '1-0-1', key: '1-0-1' },
          { title: '1-0-2', key: '1-0-2' },
        ],
      },
      {
        title: '1-1',
        key: '1-1',
        children: [
          { title: '1-1-0', key: '1-1-0' },
          { title: '1-1-1', key: '1-1-1' },
          { title: '1-1-2', key: '1-1-2' },
        ],
      },
      {
        title: '1-2',
        key: '1-2',
      },
    ],
  },
  {
    title: '2',
    key: '2',
    children: [
      { title: '2-0', key: '2-0' },
      { title: '2-1', key: '2-1' },
      { title: '2-2', key: '2-2' },
    ],
  },
  {
    title: '3',
    key: '3',
  },
];

const rightTreeData = [
  {
    title: 'A',
    key: 'A',
    children: [
      {
        title: 'A-a',
        key: 'A-a',
        children: [
          { title: 'A-a-a', key: 'A-a-a' },
          { title: 'A-a-b', key: 'A-a-b' },
          { title: 'A-a-c', key: 'A-a-c' },
        ],
      },
      {
        title: 'A-b',
        key: 'A-b',
        children: [
          { title: 'A-b-a', key: 'A-b-a' },
          { title: 'A-b-b', key: 'A-b-b' },
          { title: 'A-b-c', key: 'A-b-c' },
        ],
      },
      {
        title: 'A-c',
        key: 'A-c',
      },
    ],
  },
  {
    title: 'B',
    key: 'B',
    children: [
      { title: 'B-a', key: 'B-a' },
      { title: 'B-b', key: 'B-b' },
      { title: 'B-c', key: 'B-c' },
    ],
  },
  {
    title: 'C',
    key: 'C',
  },
];

export default {
  created() {
    this.handleTreeData(this.leftTreeData, this.rightTreeData)
    this.handleTreeData(this.rightTreeData, this.leftTreeData)
  },
  data() {
    return {
      leftExpandedKeys: [],
      leftTreeData,
      rightTreeData,
      rightExpandedKeys: []
    };
  },
  methods: {
    onLeftExpand(expandedKeys) {
      this.leftExpandedKeys = expandedKeys;
      this.rightExpandedKeys = []
      expandedKeys.forEach(item => {
        this.rightExpandedKeys.push(this.findNode(this.leftTreeData, item)[0])
      })
    },
    onRightExpand(expandedKeys) {
      this.rightExpandedKeys = expandedKeys;
      this.leftExpandedKeys = []
      expandedKeys.forEach(item => {
        this.leftExpandedKeys.push(this.findNode(this.rightTreeData, item)[0])
      })
    },
    // 功能：添加'oppositeNode'属性，以便找到对应树节点。
    handleTreeData(treeData, oppositeNode) {
      for (let j = 0; j < treeData.length; j++) {
        // 1.oppositeNode 属性值构建
        // 1.1 避免 oppositeNode 出现无限循环
        let obj = {}
        obj['key'] = oppositeNode[j].key
        obj['title'] = oppositeNode[j].title
        // 1.2 避免有的节点没有children，导致该字段为undefined。
        if ('children' in oppositeNode[j]) {
          obj['children'] = oppositeNode[j].children
        }
        // 2. 赋值
        treeData[j]['oppositeNode'] = obj
        // 3. 递归
        if ('children' in treeData[j] && 'children' in oppositeNode[j]) {
          this.handleTreeData(treeData[j].children, oppositeNode[j].children)
        }
      }
    },
    // 功能：寻找当前展开树节点的对应树节点
    findNode(data, nodeKey) {
      let result = []
      function find(treeData, treeNodeKey) {
        for (let i = 0; i < treeData.length; i++) {
          if (treeData[i].key === treeNodeKey) {
            result.push(treeData[i].oppositeNode.key)
          }
          if ('children' in treeData[i]) {
            find(treeData[i].children, treeNodeKey)
          }
        }
      }
      find(data, nodeKey)
      return result
    }
  }
};
</script>
<style scoped>
.box {
  margin: 100px;
  border: 1px dashed rgb(184, 178, 178);
  height: 500px;
}

.box-height {
  height: 100%;
}

.box-border {
  border-right: 1px solid rgb(184, 178, 178);
  height: 100%;
}
</style>