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

小泡泡c

已于 2022-08-16 16:07:59 修改

阅读量1.4k

点赞数

分类专栏： Ant Design 文章标签： vue.js javascript 前端

于 2022-08-16 16:07:40 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45325810/article/details/126368306

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果展示

说明：点击左边或右边某个树节点，对应树节点也会跟着展开、收起。

举例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: [
          {

最低0.47元/天解锁文章