Vue-easy-tree封装及使用

1.使用及安装

下载依赖
npm install @wchbrad/vue-easy-tree引入俩种方案
1.在main.js中引入
import VueEasyTree from "@wchbrad/vue-easy-tree";
import "@wchbrad/vue-easy-tree/src/assets/index.scss"
Vue.use(VueEasyTree)2.当前页面引入
import VueEasyTree from "@wchbrad/vue-easy-tree";
import "@wchbrad/vue-easy-tree/src/assets/index.scss"

2.封装vue-easy-tree

<template><div class='select-tree-container' ref="selectMutiple"><el-inputautocomplete="off":placeholder="loading?'正在加载数据···':placeholder":readonly="true":disabled="loading":value="checkedTreeData"><i v-show="loading" slot="suffix" class="el-input__icon el-icon-loading"></i></el-input><transition name="sub-comments"><divclass="scroll-container"v-show="selectTreeFlag"><el-inputplaceholder="输入关键字进行过滤"v-model="filterText"></el-input><VueEasyTree:data="treeData"show-checkboxheight="500px":node-key="treeProps.value":props="treeProps":default-checked-keys="newArr"ref="selectMutipleTree"@check="handleCheck":filter-node-method="filterNode":check-strictly="checkStrictly"></VueEasyTree></div></transition></div>
</template><script>
import VueEasyTree from "@wchbrad/vue-easy-tree";
// 样式文件,可以根据需要自定义样式或主题
import "@wchbrad/vue-easy-tree/src/assets/index.scss"
import {debounce} from '@/shared/debounceAndtThrottle.js'
export default {name: 'SelectMutipleTree',components: {VueEasyTree},props: {treeData: {type: Array,required: true,default:[],},treeProps: {type: Object,default: function () {return {value: 'id',label: 'orgName',checkStrictly: true}}},checkedTreeData: {type: String,required: true},placeholder: {type: String,default: '请输入'},checkStrictly: {type: Boolean,default: false},loading: {type: Boolean,default: true},defaultCheckedKeys:{type: Array,default:() => {return []},}},data () {return {selectTreeFlag: false,filterText: '',filterText_:null,newArr:[]}},watch: {checkedTreeData: function (newValue) {if (!newValue) {this.$nextTick(() => {this.$refs.selectMutipleTree.setCheckedKeys([])})}},filterText(val) {this.filterText_(val)},treeData(val){var num = 0this.chuli(val,num)},defaultCheckedKeys(val){if(val.length == 0) {this.newArr =[]}else{this.chuliCheckedKeys(this.treeData, val)}}},methods: {chuliCheckedKeys(list, val){list.forEach(item => {val.forEach(i => {if(item[this.treeProps.value].split('-')[0] === i){i= item[this.treeProps.value]this.newArr.push(i)}})if(item[this.treeProps.children]){this.chuliCheckedKeys(item[this.treeProps.children], val)}})},chuli(list,num){list.forEach(i=>{num++i[this.treeProps.value] = i[this.treeProps.value] + "-" + num;if(i[this.treeProps.children]){this.chuli(i[this.treeProps.children],num)}})},handleCheck (checkedNodes, checkedKeys) {checkedKeys.checkedNodes.forEach((f) => {f[this.treeProps.value] =  f[this.treeProps.value].split('-')[0]});this.$emit('handleCheckData', checkedKeys.checkedNodes)},filterNode(value, data) {if (!value) return true;return data[this.treeProps.label].includes(value);}},created () {},mounted () {if (!this.checkedTreeData) {this.$nextTick(() => {this.$refs.selectMutipleTree.setCheckedKeys([])})}this.$refs.selectMutiple && this.$refs.selectMutiple.addEventListener('click', (event) => {const ev = event || window.eventif (ev.stopPropagation) {ev.stopPropagation()} else {ev.cancelable = true}this.selectTreeFlag =  !this.loading && true})this.$root.$el.addEventListener('click', (event) => {this.selectTreeFlag = false})this.filterText_ = debounce((val)=>this.$refs.selectMutipleTree.filter(val), 1000)},destroyed () {}
}
</script>
<style lang="scss" scoped>
.scroll-container {max-height: 600px;overflow-y: auto;position: absolute;z-index: 10;width: 100%;border: 1px solid #eeeeee;border-top: none;background: #ffffff;::v-deep {.el-scrollbar__wrap {overflow-x: hidden;}}
}
.sub-comments-leave-active,.sub-comments-enter-active {transition: max-height 0.1s linear;
}
.sub-comments-enter,.sub-comments-leave-to {max-height:0 ;opacity: 0;
}
.sub-comments-enter-to,.sub-comments-leave {max-height: 136px ;
}
</style>

3.具体页面该如何使用

<select-mutiple-tree  size="mini" style="display: inline-block" :treeData="organizationTree" :treeProps="releaseTreeProps" :loading="treeLoading" :checkedTreeData="addCaseForm.copyToUserListName" 
placeholder="请选择"  @handleCheckData="handleCheck" :checkStrictly="releaseTreeProps.checkStrictly">
</select-mutiple-tree>1.data中定义organizationTree: [],treeLoading: true, //控制人员树加载状态releaseTreeProps: {value: "nodeIdAndType",label: "nodeName",children: "organizationTreeUserSingeNodeList",checkStrictly: false,},addCaseForm: {copyToUserListName:'',copyToUserList:[], //抄送人}
2.引入及注册import SelectMutipleTree from "@/components/selectMutipleTree";components:{SelectMutipleTree }
3.接口中写接口名字().then((response) => {const { data, success } = response;if (success) {this.organizationTree = data;this.treeLoading = false;} else {this.organizationTree = [];this.treeLoading = false;}}).catch((error) => {this.organizationTree = [];this.treeLoading = false;});
4.方法handleCheck(checkedData) {if (checkedData.length > 0) {// 集合var namesArr = [];var idsArr = [];var userName = [];checkedData.forEach((f) => {if (f.nodeType !== 0) {namesArr.push(f.nodeName);idsArr.push(f.nodeId)userName.push({id: f.nodeId,name: f.nodeName,});}});this.addCaseForm.copyToUserListName = namesArr.join(";");this.addCaseForm.copyToUserList = idsArr;} else {this.addCaseForm.copyToUserListName = '';this.addCaseForm.copyToUserList = [];}},

 5.具体返回的后台格式

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

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

相关文章

构建企业私域流量池:新时代的客户管理策略

随着互联网的发展和数字化时代的来临&#xff0c;企业面临的竞争环境日趋激烈。为了在众多竞争者中脱颖而出&#xff0c;许多企业开始转向私域流量的建设。私域流量是企业通过自有渠道获取的、可以自由支配的流量&#xff0c;对于提升品牌忠诚度、促进销售增长具有重要意义。本…

PAT-Apat甲级题1007(python和c++实现)

PTA | 1007 Maximum Subsequence Sum 1007 Maximum Subsequence Sum 作者 CHEN, Yue 单位 浙江大学 Given a sequence of K integers { N1​, N2​, ..., NK​ }. A continuous subsequence is defined to be { Ni​, Ni1​, ..., Nj​ } where 1≤i≤j≤K. The Maximum Su…

在建站和小程序方面,公司如何提升客户的体验

在建站和小程序方面&#xff0c;公司可以通过以下几个方面来提升客户的体验&#xff1a; 了解客户需求&#xff1a;在项目开始之初&#xff0c;深入了解客户的业务需求、目标受众、品牌风格等&#xff0c;是至关重要的。通过与客户的深入沟通&#xff0c;可以更好地把握其需求…

2024年第三届能源与环境工程国际会议(CFEEE 2024) | Ei&Scopus双检索

会议简介 Brief Introduction 2024年第三届能源与环境工程国际会议(CFEEE 2024) 会议时间&#xff1a;2024年12月12日-14日 召开地点&#xff1a;澳大利亚凯恩斯 大会官网&#xff1a;CFEEE 2024-2024 International Conference on Frontiers of Energy and Environment Engine…

day42_jdbc

今日内容 0 复习昨日 1 JDBC概述 2 JDBC开发步骤 3 完成增删改操作 4 ResultSet 5 登录案例 0 复习昨日 1 写出JQuery,通过获得id获得dom,并给input输入框赋值的语句 $(“#id”).val(“值”) 2 mysql内连接和外连接的区别 内连接只会保留完全符合关联条件的数据 外连接会保留表…

如何在linux下使用openssl自签https的ip证书配置nginx

《如何在linux下使用openssl自签https的ip证书配置nginx》首发牧马人博客转发请加此提示 如何在linux下使用openssl自签https的ip证书配置nginx 背景 **<<如何在linux下使用openssl自签https的ip证书配置nginx>>**这篇文章的诞生跟上篇&#xfeff;&#xfeff;浅…

antv/x6节点添加鼠标悬浮高亮和删除功能

antv/x6节点添加鼠标悬浮高亮和删除功能 效果鼠标悬浮高亮鼠标移出恢复原状态 效果 鼠标悬浮高亮 this.graph.on(node:mouseenter, ({ node }) > {node.addTools({name: button-remove,args: {x: 100%,y: 0,offset: { x: 0, y: 0 },},})})鼠标移出恢复原状态 this.graph.on(…

Java/Python/Go不同开发语言基础数据结构和相关操作总结-数组篇

Java/Python/Go不同开发语言基础数据结构和相关操作总结 1. Java1.1 静态数组Object[]1.1.1 数据结构和定义方式1.1.2 增加1.1.3 修改1.1.4 查询1.1.5 删除1.1.6 获取元素的位置1.1.7 获取总长度1.1.8 正向排序1.1.9 逆向排序 1.2 动态列表List\<Object>1.2.1 数据结构和…

如何实现冻干机和产品全生命周期的验证和监测?

为什么冻干需要工艺优化和合规性 冻干是制药和生物技术产品的关键工艺&#xff0c;需要精确控制关键的温度和压力参数。通过遵守 GMP 和 FDA 合规性等监管准则&#xff0c;您可以生产出更高质量的产品&#xff0c;避免不必要的浪费&#xff0c;并缩短产品上市时间。 要想在冻干…

Java on Azure Tooling 2024年1月更新|Azure Key Vault 支持、示例项目创建支持及更多

作者&#xff1a;Jialuo Gan - Program Manager, Developer Division At Microsoft 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎来到 2024 年 Java on Azure 工具的首次更新。在本次更新中&#xff0c;我们将介绍对于 Azure Key Vault 支持、基于 Azure 示例项目的创建支…

Python入门指北二十六

Python中如何实现静态类型检查和动态类型检查&#xff1f;你有哪些工具推荐&#xff1f; Python中有许多常用的Web开发框架&#xff0c;每个框架都有其独特的特点和适用场景。以下是一些常用的Web开发框架及其特点&#xff1a; Django&#xff1a; 特点&#xff1a;Django是一…

更换服务器是否需要更换SSL证书?

在互联网时代&#xff0c;随着企业和网站的发展&#xff0c;更换服务器是一种常见的需求。然而&#xff0c;许多网站管理员在更换服务器时是否需要更换SSL证书存在疑虑。本文将就此问题进行探讨&#xff0c;帮助您了解在更换服务器时是否需要更换SSL证书。 1、SSL证书的绑定 SS…

【面试】冲刺春招!每天三十道面试题——Java基础篇(一)

目录 一 JDK 和 JRE 的区分 二 简述编码的作用以及记事本的实现原理 三 基本类型有哪些&#xff1f;分别占据多少空间&#xff1f; 四 java中布尔类型的空间大小是怎么定下来的&#xff1f;为什么不是1bit&#xff0c; 把考虑因素说一下 五 int类型和float类型哪一个精度更…

nohost本地部署

1、安装node Node.js 官方网站下载&#xff1a;https://nodejs.org/en/download/ 2、安装whistle 安装命令为 npm install -g whistle 或 npm install -g cnpm --registryhttps://registry.npm.taobao.org 后&#xff0c;使用 cnpm install -g whistle 来安装 3、插件修改 官方…

线性矩阵不等式LMI与李雅普诺夫Lyapunov稳定性

文章目录 线性矩阵不等式&#xff08;Linear Matrix Inequality&#xff0c;LMI&#xff09;例子 Lyapunov稳定性Schur Complement定义Schur Complement作用/性质利用Schur Complement将LMI和Lyapunov联系起来 线性矩阵不等式&#xff08;Linear Matrix Inequality&#xff0c;…

BUG:docker启动之后直接退出问题

示例如下&#xff1a; 问题排查&#xff1a; 启动命令 sudo docker run --privilegedtrue --runtimenvidia --shm-size80g -v /mmm_data_center:/mmm_data_center -v /imagecenter_new/:/imagecenter_new -v /data1:/data1 -v /mnt/offline_data/:/mnt/offline_data/ --neth…

cesium-测量高度垂直距离

cesium做垂直测量 完整代码 <template><div id"cesiumContainer" style"height: 100vh;"></div><div id"toolbar" style"position: fixed;top:20px;left:220px;"><el-breadcrumb><el-breadcrumb-i…

【51单片机】直流电机实验和步进电机实验

目录 直流电机实验直流电机介绍ULN2003 芯片介绍硬件设计软件设计实验现象 步进电机实验步进电机简介步进电机的工作原理步进电机极性区分双极性步进电机驱动原理单极性步进电机驱动原理细分驱动原理 28BYJ-48 步进电机简介软件设计 橙色 直流电机实验 在未学习 PWM 之前&…

理解Jetpack Compose中的`remember`和`mutableStateOf`

理解Jetpack Compose中的remember和mutableStateOf 在现代Android开发中&#xff0c;Jetpack Compose已经成为构建原生UI的首选工具。它引入了一种声明式的编程模式&#xff0c;极大地简化了UI开发。在Compose的世界里&#xff0c;remember和mutableStateOf是两个非常关键的函…

智慧城市:打造低碳未来,引领城市数字化转型新篇章

在“万物皆可数字化”的新时代浪潮下&#xff0c;智慧城市作为未来城市发展的先锋方向&#xff0c;正在以前所未有的速度和规模重塑我们的城市面貌。 智慧城市不仅是一个技术革新的标志&#xff0c;更是城市治理、民生服务等领域全面升级的重要引擎。 一、智慧城市的多元应用领…