vue实现自定义树形穿梭框功能

最新推荐文章于 2025-04-02 15:54:40 发布

SwJieJie

最新推荐文章于 2025-04-02 15:54:40 发布

阅读量2k

点赞数 11

文章标签：前端 javascript elementui vue.js

本文链接：https://blog.csdn.net/qq_44552416/article/details/136374424

版权

本文介绍了如何在ElementUI中创建一个穿梭框，左侧显示树形结构，右侧无层级结构。作者分享了自定义封装的treeTransfer组件代码，以及如何在实际项目中使用它，同时提到了使用el-tree-transfer插件作为替代方案。

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

需求：

我们在开发过程中，会遇到需要将一个数据选择做成穿梭框，但是要求穿梭框左侧为树形结构、右侧为无层级结构的数据展示，ElementUI自身无法在穿梭框中添加树形结构，网上搜到了大佬封装的插件但是对于右侧的无树形结构一点还是不太满足。以下是我们简单的封装写的组件可以实现此功能

在这里插入图片描述

1，封装的treeTransfetr组件如下：

<template>
    <div class="treeTransfer">
      <!-- 左边 -->
      <div class="leftTree">
          <div class="list">
              <div class="left_lowline">
                  <div class="leftcheck_con">
                      <el-checkbox v-model="checkedLeft" :disabled="leftTreeData.length < 1" label="" size="large"
                      style="margin-right: 12px" @change="leftAllCheck" />
                      <p class="left_title">{
   {
    props.title[0] }}</p>
                  </div>
                  <div>
                      {
   {
    leftOperation.length }}/{
   {
    leftAllselectIdarry.length }}
                  </div>
              </div>
              <el-tree 
                  ref="leftTreeRef" 
                  :data="leftTreeData" 
                  show-checkbox
                  node-key="id" 
                  :props="props.defaultProps" 
                  v-slot="{ node, data }" 
                  accordion
                  :check-strictly="true"
                  @check="onCheckLeft" 
                  default-expand-all>
                  <div>
                      {
   {
    data.label }}
                  </div>
              </el-tree>
          </div>
      </div>
      <!-- 中间按钮 -->
      <div class="btnDiv">
          <div class="mg10">
              <el-button @click="toRight()" icon="ele-Right" type="primary"  circle :disabled="leftOperation.length < 1"/>
          </div>
          <div class="mg10">
              <el-button @click="toLeft()" icon="ele-Back" type="primary" circle :disabled="rightOperation.length < 1"/>
          </div>
      </div>
      <!-- 右边 -->
      <div class="rightTree">
          <div class="list">
              <div class="left_lowline">
                  <div class="leftcheck_con">
                      <el-checkbox v-model="checkedRight" :disabled="rightTreeData.length < 1" label="" size="large"
                      style="margin-right: 12px" @change="rightAllCheck" />
                      <p class="left_title">{
   {
    props.title[1] }}</p>
                  </div>
                  <div>
                      {
   {
    rightOperation.length }}/{
   {
    rightAllselectIdarry.length }}
                  <<

最低0.47元/天解锁文章