el-transfer和el-tree进行结合搞一个树形穿梭框

news2025/3/16 10:03:26

由于业务需求需要在穿梭框里使用树形结构,但是本身element里并不支持,于是参考了别的大佬发的文章作为思路及后续自己新增了一些处理功能。

目录

1.拷贝代码放到自己的项目目录中

2.改造el-transfer的源码

3.修改tree-transfer-panel.vue文件

4.修改index.vue文件

5.对tree-transfer-panel.vue文件功能进行完善


1.拷贝代码放到自己的项目目录中

在github上搜索element,拷贝packages/transfer/src中的vue文件,放到项目的components/tree-transfer目录。把main.vue改成index.vue方便操作。

在需要用到穿梭框的页面中拷贝transfer源码的组件,效果和使用el-transfer效果一致

<my-el-tree-transfer
    v-model="treeChecked"
    :data="treeData"
    :titles="['请选择功能', '已选择功能']"
    @change="transferChange"
    target-order='push'>
</my-el-tree-transfer>
...
import myElTreeTransfer from '@/components/treeTransfer'
export default {
    data(){
        // 初始的数据源
        functionSourceArray: [
            { key: 1, label: '功能1' },
            { key: 2, label: '功能2' },
            { key: 3, label: '功能3' },
            { key: 4, label: '功能4' },
        ],
        treeChecked: [],
        // 改造后数据源需要tree结构的数据
        treeData: [
            {
                label: '一级 1', children: [
                    { key: 2, label: '二级 1-1' },
                    { key: 3, label: '二级 1-2' },
                ]
            },
            {
                label: '一级 2', children: [
                    { key: 5, label: '二级 2-1' },
                    { key: 6, label: '二级 2-2' },
                ]
            },
        ]
    }
}

2.改造el-transfer的源码

index.vue的dom由三部分组成,左边的panel、中间的操作按钮,右边的panel,只需要修改左边的panel就可以,接下来拷贝一份transfer-panel.vue并改名为tree-transfer-panel.vue,修改index.vue的引用

// index.vue
<div class="el-transfer">
    <tree-transfer-panel ...></tree-transfer-panel>
    <div class="el-transfer__buttons">...</div>
    <transfer-panel ...></transfer-panel>
</div>
...
import TreeTransferPanel from './tree-transfer-panel.vue';

3.修改tree-transfer-panel.vue文件

先将中间部分的checked-group替换为el-tree

// tree-transfer-panel.vue
<div :class="['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']">
    <el-input class="el-transfer-panel__filter" v-model="query" size="small" :placeholder="placeholder"
        @mouseenter.native="inputHover = true" @mouseleave.native="inputHover = false" v-if="filterable">
        <i slot="prefix" :class="['el-input__icon', 'el-icon-' + inputIcon]" @click="clearQuery"></i>
    </el-input>
    <!-- 原先的el-checkbox-group -->
    <!-- <el-checkbox-group v-model="checked" v-show="!hasNoMatch && data.length > 0"
        :class="{ 'is-filterable': filterable }" class="el-transfer-panel__list">
        <el-checkbox class="el-transfer-panel__item" :label="item[keyProp]" :disabled="item[disabledProp]"
            :key="item[keyProp]" v-for="item in filteredData">
            <option-content :option="item"></option-content>
        </el-checkbox>
    </el-checkbox-group> -->
    <!-- 替换后的el-tree -->
    <el-tree ref="tree" :data="filteredData" node-key="key" default-expand-all show-checkbox :default-checked-keys="checked" @check="treeCheckChange"></el-tree>
    <p class="el-transfer-panel__empty" v-show="hasNoMatch">{{ t('el.transfer.noMatch') }}</p>
    <p class="el-transfer-panel__empty" v-show="data.length === 0 && !hasNoMatch">{{ t('el.transfer.noData') }}
    </p>
</div>

添加el-tree选择的event

@check 当复选框被点击的时候触发 共两个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
checkedKeys选中的key
halfCheckedKeys半选中的key

这时候看页面,结构已经出来了

treeCheckChange(cur,checkedInfo){
    const {checkedKeys} = checkedInfo
    this.checked = checkedKeys
}

4.修改index.vue文件

先把dom结构的第一个panel换为tree-transfer-panel.vue

<div class="el-transfer">
    <tree-transfer-panel ...

左边的panel及右边的panel:data数据都是计算属性,右边的结构没有改变,左边的结构变为了tree,所以只需要把左边的:data改变即可。原来的数据结构是一维数组,现在的是二维数组,数据源需要根据数据结构做相应的改变。

这个sourceData作用是每次把左边的数据添加到右边以后需要把添加的数据从左边去掉。

// index.vue
sourceData() {
    let temp = []
    const originalData = this.data
    for(let i=0; i<originalData.length;i++){
        temp.push({label: originalData[i].label})
        temp[i].children = []
        for(let j=0; j<originalData[i].children.length; j++){
            let tempKey = originalData[i].children[j].key
            if(this.value.indexOf(tempKey) === -1){
                temp[i].children.push(originalData[i].children[j])
            }
        }
    }
    return temp
    // return this.data.filter(item => this.value.indexOf(item[this.props.key]) === -1);
},

修改完以后每次往右边添加左边的该数据就会消失。但是此时右边并没有显示出左边添加过去的数据,此时需要修改addToRight方法

addToRight() {
    let currentValue = this.value.slice();
    const itemsToBeMoved = [];
    const key = this.props.key;
    let dataTemp = []
    // 该处是修改部分,数据结构变为二维以后,需要把第二层的数据放到数据源中
    this.data.forEach(item=>{
        dataTemp = dataTemp.concat(item.children)
    })
    dataTemp.forEach(item => {
        const itemKey = item[key];
        if (
            this.leftChecked.indexOf(itemKey) > -1 &&
            this.value.indexOf(itemKey) === -1
        ) {
            itemsToBeMoved.push(itemKey);
        }
    });
    currentValue = this.targetOrder === 'unshift'
        ? itemsToBeMoved.concat(currentValue)
        : currentValue.concat(itemsToBeMoved);
    this.$emit('input', currentValue);
    this.$emit('change', currentValue, 'right', this.leftChecked);
},

右边panel展示的数据computed由于用到的dataObj,所以计算属性dataObj也要做相应调整

dataObj() {
    const key = this.props.key;
    let temp = []
    // 获取第二层的数据
    this.data.forEach(item=>{
        temp = temp.concat(item.children)
    })
    return temp.reduce((o, cur) => (o[cur[key]] = cur) && o, {});
    // return this.data.reduce((o, cur) => (o[cur[key]] = cur) && o, {});
},

这时候正常结构和功能都已经出来了,那么接下来我又新增了全选及当没有子节点的情况下禁止选中的功能。

5.对tree-transfer-panel.vue文件功能进行完善

对复选框点击事件进行修改,可以对树级选择器进行全选及取消操作

//tree-transfer-panel.vue
  <p class="el-transfer-panel__header">
            <el-checkbox v-model="allChecked" @change="handleAllCheckedChange" :indeterminate="isIndeterminate">
                {{ title }}
                <span>{{ checkedSummary }}</span>
            </el-checkbox>
  </p>

  handleAllCheckedChange(isChecked) {
            // this.checked = value
            //     ? this.checkableData.map(item => item[this.keyProp])
            //     : [];
            const allKeys = this.filteredData.reduce((acc, node) => {
                acc.push(node.key);
                if (node.children) {
                    acc.push(...this.getAllKeys(node.children));
                }
                return acc;
            }, []);
            this.checked = isChecked ? allKeys : [];
            this.$refs.tree.setCheckedKeys(this.checked);
 },
   getAllKeys(nodes) {
            return nodes.reduce((acc, node) => {
                acc.push(node.key);
                if (node.children) {
                    acc.push(...this.getAllKeys(node.children));
                }
                return acc;
      }, []);
  },

对于没有子节点的父级进行禁止选中功能,通过监听树级结构data里的数据,来给父节点是否增加disabled禁止选中

<el-tree ref="tree" :data="filteredData" node-key="key" show-checkbox
       :class="{ 'is-filterable': filterable }" class="el-transfer-panel__list "
       :default-checked-keys="checked" @check="treeCheckChange">
</el-tree>

watch:{
  filteredData(newVal) {
      this.disableNodesWithoutChildren(newVal);
   },
},
methods:{
    disableNodesWithoutChildren(nodes) {
            nodes.forEach((node) => {
                if (node.children && node.children.length === 0) {
                    node.disabled = true; // 如果没有子节点,禁用该节点
                } else if (node.children) {
                    // 如果有子节点,递归处理子节点
                    this.disableNodesWithoutChildren(node.children);
                }
            });
      },
}

这样所有功能都已经完成。在把树级结构的数据替换成自己的后端接口返回的数据及就可以了。

需要注意一点,我自己引进的时候由于我使用的是vue2语法,有一处地方提示我使用了jsx语法而报错

于是我改变了它形式,具体功能和展示效果与原来一样

最后我自己的效果展示

参考文章 https://juejin.cn/post/7066079104742719525?searchId=20240522133658C46B56C6941369684F86

github地址 GitHub - ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1694992.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言内存函数超详细讲解

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 C语言内存函数超详细讲解 收录于专栏【C语言学习】 本专栏旨在分享学习C语言学习的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. m…

IDEA打开项目报错

IDEA打开项目报错&#xff1a; Cannot read scheme C:\Users\xxxxxx\AppData\Roaming\JetBrains\IntelliJIdea2023.2\qaplug_profiles\Default.xmljava.lang.AbstractMethodError: Receiver class com.soldevelo.qaplug.scanner.AnalysisProfileManager$2 does not define or i…

浅谈后端boot框架整合第三方技术JUnit MyBatis Druid整体思想

整合第三方技术 不要单单学习指定技术与springboot整合的方式 学习目标的是整合整体的技术的思路 拿到任何一个第三方技术后我们在springboot中如何操作 这是真正我们应该学习的东西 以后能整合任意技术 整合JUnit JUnit 是一个流行的开源测试框架&#xff0c;用于 Java …

frp搭建内网流量转发

前提条件 有一台外网服务器 背景介绍 外网服务器linux内网客户端Windows 10下载frp软件安装包 下载地址:https://github.com/fatedier/frp/releases 服务端软件包下载 客户端软件包下载 服务端部署 解压软件包 tar xzvf frp_0.58.0_linux_amd64.tar.gz修复加压后文件夹名…

解决远程链接的“Gtk-WARNING **: cannot open display;

1.需要检查ssh配置中X11Forwarding是否启用 2.检查本地ssh工具是否启用x11转发&#xff08;下图以mobaxterm为例&#xff09; 3.检查是否有防火墙等其他网络拦截&#xff0c;如果没有特殊需求&#xff0c;这里可以直接将防火墙服务关闭 4.按上诉操作检查后&#xff0c;正常情况…

力扣周赛398题解

特殊数组Ⅰ 如果数组的每一对相邻元素都是两个奇偶性不同的数字&#xff0c;则该数组被认为是一个 特殊数组 。 Aging 有一个整数数组 nums。如果 nums 是一个 特殊数组 &#xff0c;返回 true&#xff0c;否则返回 false。 示例 1&#xff1a; 输入&#xff1a;nums [1] …

工业路由器在工厂数字化的应用及价值

随着科技的飞速发展&#xff0c;数字化转型已成为工厂提高效率、降低成本、实现智能化管理的关键途径。在这个过程中&#xff0c;工业路由器凭借其独特的优势&#xff0c;正逐渐成为工厂数字化建设不可或缺的核心组件。本文将深入探讨工业路由器在工厂数字化中的应用及价值&…

Nuxt3 实战 (七):配置 Supabase 数据库

前言 这个章节我们要先把数据库的环境配置好&#xff0c;古人云&#xff1a;工欲善其事&#xff0c;必先利其器。 这两天我一直在网上寻找最适合 Nuxt 的数据库&#xff0c;之前在做个人项目时经常用的是 Mysql 和 MongoDB&#xff0c;也用过 ORM 框架比如&#xff1a;Sequel…

深入理解循环控制语句 - for

循环就是重复的意思&#xff0c;它是编程中的基石&#xff0c;它使程序能够重复执行某段代码&#xff0c;直至满足特定条件为止。 在Java中&#xff0c;for循环是一种常用的循环结构&#xff0c;它以紧凑的形式实现了迭代过程。 一、for循环基础 1.1 for循环简介 for循环在…

C++容器之无序多集(std::unordered_multiset)

目录 1 概述2 使用实例3 接口使用3.1 construct3.2 assigns3.3 iterators3.4 capacity3.5 find3.6 count3.7 equal_range3.8 emplace3.9 emplace_hint3.10 insert3.11 erase3.12 clear3.13 swap3.14 bucket_count3.15 max_bucket_count3.16 bucket_size3.17 bucket3.18 load_fa…

00.OpenLayers快速开始

00OpenLayers快速开始 官方文档&#xff1a; 快速开始&#xff1a;https://openlayers.org/doc/quickstart.html 需要node环境 一、设置新项目 npm create ol-app my-app cd my-app npm start第一个命令将创建一个名为 my-app​ 的目录&#xff08;如果您愿意&#xff0c;…

【话题】我眼神的IT行业现状与未来趋势

目录 一、挑战 教学资源的重新分配 教师角色的转变 学生学习方式的改变 教育评价体系的挑战 二、机遇 个性化学习 跨学科学习 国际合作与交流 创新教育模式 三、如何培养下一代IT专业人才 更新教育理念 加强基础设施建设 整合课程资源 加强实践教学 培养跨学科…

Golang并发编程-协程goroutine任务取消(Context)

文章目录 前言一、单个任务的取消二、 所有任务取消三、Context的出现Context的定义Context使用 总结 前言 在实际的业务种&#xff0c;我们可能会有这么一种场景&#xff1a;需要我们主动的通知某一个goroutine结束。比如我们开启一个后台goroutine一直做事情&#xff0c;比如…

浅谈C++函数

目录 一、函数的概念二、调用函数的两个前提三、函数传参的三种形式四、函数返回类型 一、函数的概念 函数是C程序的基本模块&#xff0c;通常一个C程序由一个或多个函数组成。函数可以完成用户指定的任务&#xff0c;一般分为库函数和用户自定义的函数。函数由函数头和函数体…

AIGC-常见图像质量评估MSE、PSNR、SSIM、LPIPS、FID、CSFD,余弦相似度----理论+代码

持续更新和补充中…多多交流&#xff01; 参考: 图像评价指标PNSR和SSIM 函数 structural_similarity 图片相似度计算方法总结 MSE和PSNR MSE: M S E 1 m n ∑ i 0 m − 1 ∑ j 0 n − 1 [ I ( i , j ) − K ( i , j ) ] 2 MSE\frac{1}{mn}\sum_{i0}^{m-1}\sum_{j0}^{n-1}[…

重学java 43.多线程 多等待多唤醒案例

Fear never builds the future,but hope does. —— 24.5.25 多等待多唤醒问题 在多条线程同时消费同时等待时&#xff0c;会出现问题 BaoZiPu package S77ThreadMoreWait;/*count和flag可以定义成包装类&#xff0c;但要记得给count和flag手动赋值不然对于本案例来说&#xff…

C# MemoryStream流的详解与示例

文章目录 1. MemoryStream的基本介绍2. 创建MemoryStream对象无参构造函数带参构造函数 3. 向MemoryStream中写入数据写入字节数组写入字符串 4. 从MemoryStream中读取数据读取字节数组读取字符串 5. MemoryStream的实用辅助方法获取长度设置长度定位 6. 示例代码 在C#中&#…

JWT使用方法

目录 基础概念 依赖 生成令牌 工具类 控制层 解析令牌 工具类 网关过滤器 效果 基础概念 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准&#xff08;(RFC 7519).该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点…

局域网桌面监控软件哪个好用?良心推荐

如何有效地监控和管理内部员工的计算机使用行为&#xff0c;防范潜在的安全风险&#xff0c;提高工作效率&#xff0c;是众多企业管理者关注的焦点。 而一款优秀的局域网桌面监控软件无疑能为企业的IT治理提供有力支撑。 小编在此给大家推荐一款好用的局域网桌面监控软件——域…

stm32H743不要将主频设置到480MHz

0 问题描述 本文使用的stm32H743是V版本&#xff0c;支持最高480MHz的主频。但在将主频设置为480MHz之后&#xff0c;使用FDCAN的回环模式出现了各种接收不到的异常问题。经过一番排查&#xff0c;将主频修改到400MHz&#xff0c;同时降低芯片内部LDO输出电压后恢复了正常。 …