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

本文介绍了一个Vue组件实现,通过点击左侧或右侧树节点,实现对应的树节点同步展开或收起的功能。代码示例展示了如何使用Ant Design Vue库创建双向联动的树形结构,并提供了`onLeftExpand`和`onRightExpand`方法来处理展开事件,确保两个树的展开状态保持一致。
摘要由CSDN通过智能技术生成

一、效果展示

  • 说明:点击左边或右边某个树节点,对应树节点也会跟着展开、收起。
  • 举例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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值