vue2结合element-ui实现TreeSelect 树选择功能

需求背景

在日常开发中,我们会遇见很多不同的业务需求。如果让你用element-ui实现一个 tree-select 组件,你会怎么做?

这个组件在 element-plus 中是有这个组件存在的,但是在 element-ui 中是没有的。

可能你会直接使用 element-plus 组件库,或者其他组件库。但是若你的项目目前的基于vue3和element-ui进行开发的呢?

最终效果

大致思路:

el-select和el-tree进行嵌套,将el-tree放到el-option里,循环遍历el-option,同时定义一个方法比如:formatData,对树形数据进行递归处理,这样就可以实现无论嵌套的层级有几层都可以正常渲染在界面上
利用 v-model 和 update:selectValue 实现父子组件之间的双向通信,同时利用computed进行监听以实现实时更新

组件中的 v-model

我们在input中可以使用v-model来完成双向绑定:

  •  这个时候往往会非常方便,因为v-model默认会帮助我们完成两件事:
  •  v-bind:value的数据绑定和@input的事件监听;

如果我们现在封装了一个组件,其他地方在使用这个组件时,是否也可以使用v-model来同时完成这两个功能呢?

当我们在组件上使用的时候,等价于如下的操作:

  •  我们会发现和input元素不同的只是属性的名称和事件触发的名称而已;

如果我们希望绑定多个属性呢?

  •  也就是我们希望在一个组件上使用多个v-model是否可以实现呢?
  •  我们知道,默认情况下的v-model其实是绑定了 modelValue 属性和 @update:modelValue的事件;
  •  如果我们希望绑定更多,可以给v-model传入一个参数,那么这个参数的名称就是我们绑定属性的名称;

实现代码示例

子组件:

<template><div><h4>Counter: {{modelValue}}</h4><button @click="changeCounter">修改数据</button></div>
</template><script>
export default {props: {modelValue:  {type: Number},},emits: ['update:modelValue'],methods: {changeCounter(){this.$emit('update:modelValue',101)}}
}
</script>

父组件:

<template><!-- <child v-model="appCounter" /> --><!-- 等同于如下做法:modelValue--默认可以自定义名称,通过 v-model:counter 类似于这种格式--><child :modelValue="appCounter" @update:modelValue="appCounter = $event" />
</template><script>
import child from '@/components/child.vue'
export default {components: {child},data() {return {appCounter: 100,};},methods: {},
};
</script>

有了上面的知识,那么下面实现就很简单了,这里直接上代码 

组件封装

子组件:TreeSelect.vue

<template><div class="app-container" style="padding: 0"><el-selectclass="main-select-tree"ref="selectTree"v-model="value"style="width: 240px"clearable@clear="clearSelectInput"><el-inputstyle="width: 220px; margin-left: 10px; margin-bottom: 10px"placeholder="输入关键字进行过滤"v-model="filterText"clearable></el-input><el-optionv-for="item in formatData(data)":key="item.value":label="item.label":value="item.value"style="display: none"/><el-treeclass="main-select-el-tree"ref="selecteltree":data="data"node-key="id"highlight-current:props="defaultProps"@node-click="handleNodeClick":current-node-key="value":expand-on-click-node="true"default-expand-all:filter-node-method="filterNode"/></el-select></div>
</template><script>
export default {props: {selectValue: {type: String,default: "",},},data() {return {filterText: "",value: "",data: [{id: 1,label: "云南",children: [{id: 2,label: "昆明",children: [{id: 3,label: "五华区",children: [{id: 8,label: "xx街道",children: [{id: 81,label: "yy社区",children: [{ id: 82, label: "北辰小区" }],},],},],},{ id: 4, label: "盘龙区" },],},],},{id: 5,label: "湖南",children: [{ id: 6, label: "长沙" },{ id: 7, label: "永州" },],},{id: 12,label: "重庆",children: [{ id: 10, label: "渝北" },{ id: 9, label: "合川" },],},{id: 13,label: "江苏",children: [{ id: 14, label: "盐城" }],},],defaultProps: {children: "children",label: "label",},};},watch: {filterText(val) {this.$refs.selecteltree.filter(val);},},methods: {filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},// 递归遍历数据formatData(data) {let options = [];const formatDataRecursive = (data) => {data.forEach((item) => {options.push({ label: item.label, value: item.id });if (item.children && item.children.length > 0) {formatDataRecursive(item.children);}});};formatDataRecursive(data);return options;},// 点击事件handleNodeClick(node) {this.value = node.id;this.$refs.selectTree.blur();this.$emit('update:selectValue', node.label);},// 清空事件clearSelectInput() {this.$emit('update:selectValue', '');// 获取 el-tree 实例的引用const elTree = this.$refs.selecteltree;// 将当前选中的节点设置为 nullelTree.setCurrentKey(null);},},
};
</script><style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {font-weight: bold;color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {font-weight: bold;color: #409eff;
}
</style>
使用方式
<TreeSelect v-model="selectedValue" @update:selectValue="handleSelectValueChange"></TreeSelect><el-button size="medium" :disabled="todoIsTotal">交接当前{{ tableData.length }}条任务</el-button>import TreeSelect from "./TreeSelect.vue";export default {components: {TreeSelect,},data() {selectedValue: "",},computed: {todoIsTotal() {return this.selectedValue === "";},},methods: {handleSelectValueChange(value) {if (value && value.length > 0) {this.selectedValue = value;} else {this.selectedValue = "";}},},
}

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

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

相关文章

6、随机森林(Random forests)

Random forests started a revolution in machine learning 20 years ago. For the first time, there was a fast and reliable algorithm which made almost no assumptions about the form of the data, and required almost no preprocessing. In today’s lesson, you’ll…

全新Adobe利器:Project Neo为2D平面图像轻松添加3D立体效果

Adobe的崭新创意工具Project Neo&#xff0c;正以其独特的3D技术为传统的2D图像设计领域带来革命性的变化。这款工具的核心功能在于&#xff0c;它能够将原本平面的2D图像巧妙地转化为立体感十足的三维作品。 想象一下&#xff0c;你手中的图标、动画插图&#xff0c;在Projec…

高效项目管理:如何利用zz-plan在线甘特图工具

作为项目管理人员&#xff0c;使用 zz-plan https://zz-plan.com/这样的在线甘特图协作软件可以极大地提高项目管理的效率和效果。以下是结合zz-plan特点的一些关键步骤&#xff1a; 1. 制定项目计划 在zz-plan上创建新的项目&#xff0c;定义项目目标、关键里程碑和最终期限。…

Llama 3 模型上下文长度扩展至1048K

AI苏妲己&#xff1a; Gradient AI 近日宣布&#xff0c;通过其创新的渐进式训练方法&#xff0c;成功将 Llama 3 系列模型的上下文长度扩展至超过100万令牌。 Llama 3 模型最初设计用于处理8000个令牌的上下文长度&#xff0c;这大约相当于6000字或10页文档。为了适应更长的…

Spring中的Bean相关理解

在Spring框架中&#xff0c;Bean是一个由Spring IoC容器实例化、配置和管理的对象。Bean是一个被Spring框架管理并且被应用程序各个部分所使用的对象。Spring IoC容器负责Bean的创建、初始化、依赖注入以及销毁等生命周期管理。 注&#xff1a;喜欢的朋友可以关注公众号“JAVA学…

央国企加速新质生产力形成和发展,HR数字化工具如何推动创新内核构建?

自今年两会以来&#xff0c;“新质生产力”一词获得了广泛的关注。众多专家学者对其重要性、定义及作用进行了热烈且深入的讨论&#xff0c;一致强调了新质生产力的核心地位。对于那些致力于转型为现代化国有企业的国资中央企业而言&#xff0c;培育新质生产力无疑成为了当前及…

通过高效的升级计划控制云成本

快速迁移到云以及使用和成本的复杂性使得公司迫切希望减少浪费并控制其支出。更糟糕的是&#xff0c;动荡的经济让决策者紧张不安&#xff0c;他们考虑削减成本措施并优先考虑锁定收入。 如果没有正式的 FinOps 或成本优化策略&#xff0c;公司很容易看到云费用如滚雪球般失控…

ABAP—ALV 进阶:对展示数字要求负号提前、有千分符、有百分号

1、负号提前 问题描述&#xff1a;SAP的数据&#xff0c;例如金额&#xff0c;为负数时&#xff0c;负号放在数值后面&#xff0c;不符合一般的负号在前的读数习惯&#xff0c;如何把负号放到数值前面&#xff1f; 解决办法&#xff1a;使用 CLOI_PUT_SIGN_IN_FRONT CALL FU…

QSPI的使用

Quad SPI接口(QSPI)是一种同步串行数据链路,在主模式下提供与外部设备的通信。它类似于SPI协议,只是它有额外的数据线。 普通SPI有四条通信线路:芯片选择、时钟、MOSI和MISO。对于QSPI,可提供额外的数据线。因此,命令/数据/地址是根据所选模式通过单、四或双IO发送的。由…

一个物业管理服务项目的思考——智慧停车场无人值守呼叫系统到电梯五方对讲再到呼叫中心

目录 起源智慧停车场无人值守呼叫系统然后电梯五方对讲系统又然后物业呼叫中心集控E控中心怎么做 起源 小区里新装了智慧停车场系统&#xff0c;马上展现出了科技化、现代化的新形象。一个显著的好处是&#xff1a;停车场的出入口&#xff0c;再也看不到司机和保安争吵的场景了…

STM32F407VET6 学习笔记2:定时器、串口、自定义串口打印函数

今日继续学习使用嘉立创购买的 立创梁山派天空星&#xff0c;芯片是 STM32F407VET6 因为已经有学习基础了&#xff0c;所以学习进度十分快&#xff0c;这次也是直接一块学习配置定时器与串口了&#xff0c;文章也愈来愈对基础的解释越来越少了...... 文章提供测试代码讲解、完…

什么是企业出海?

本文节选自Odoo亚太金牌服务机构【开源智造】所编写的《企业数字化百科大全》如需获取完整的知识内容&#xff0c;请至开源智造官网免费获取。感谢网友一键三连&#xff1a;点赞、转发、收藏&#xff0c;您的支持是我们最大的前进动力&#xff01; 企业出海是什么意思&#xff…

idea Maven 插件 项目多环境打包配置

背景 不同环境的配置文件不一样&#xff0c;打包方式也有差异 1. 准备配置文件 这里 local 为本地开发环境 可改为 dev 名称自定义 test 为测试环境 prod 为生产环境 根据项目业务自行定义 application.yml 配置&#xff1a; spring:profiles:#对应pom中的配置active: spring.…

指代消解类方法梳理

概念&#xff1a; MLM&#xff1a;带遮罩的语言模型 NSP&#xff1a;单句预测&#xff0c;任务包括两个输入序列 SBO&#xff1a;分词边界目标 1.spanBERT&#xff0c;2019 spanBERT是对bert从分词到文本跨度的优化&#xff0c;主要有两方面的优化&#xff1a;&#xff08…

node报错——解决Error: error:0308010C:digital envelope routines::unsupported——亲测可用

今天在打包vue2项目时&#xff0c;遇到一个报错&#xff1a; 最关键的代码如下&#xff1a; Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:80:19)百度后发现是node版本的问题。 在昨天我确实操作了一下node&…

【Vue】pinia

pinia 官网:https://pinia.vuejs.org/zh/ 搭建 pinia 环境 第一步&#xff1a;npm install pinia --save 第二步&#xff1a;操作src/main.ts import { createApp } from vue import App from ./App.vue/* 引入createPinia&#xff0c;用于创建pinia */ import { createP…

idea提示 CreateProcess error=206, 文件名或扩展名太长有哪些具体的解决方法

背景&#xff1a; 项目启动后提示CreateProcess error206&#xff0c;通常我本地是将shorten command line改成如下就可以解决&#xff0c;但是今天遇到一个&#xff0c;无论这里怎么设置都是启动提示扩展名太长&#xff0c;经过一番处理问题终于解决&#xff0c;特此记录一下。…

基于51单片机的电子钟秒表LCD1602仿真设计( proteus仿真+程序+设计报告+原理图+讲解视频)

基于51单片机的电子钟秒表LCD1602仿真设计( proteus仿真程序设计报告原理图讲解视频&#xff09; 这里写目录标题 1. 主要功能&#xff1a;2. 讲解视频&#xff1a;3. 仿真4. 程序代码5. 设计报告6. 原理图7. 设计资料内容清单&&下载链接 仿真图proteus7.8及以上 程序…

Compose 状态管理

文章目录 Compose 状态管理概述使用MutableStaterememberStatelessComposable & StatefulComposable状态提升rememberSaveable支持parceable不支持parceable 使用ViewModelViewModelProvider.Factory 使用Flow Compose 状态管理 概述 当应用程序的状态发生变化时&#xf…

第五章 TypeScript泛型的介绍和使用

文章目录 一、泛型初识泛型泛型用法 二、断言 一、泛型 初识泛型 一个函数&#xff0c;需要参数是 number 数据类型&#xff0c;返回值也是 number 数据类型 function fn(arg: number): number { // 代码忽略不计 }又一个函数&#xff0c;需要参数是 string 类型&#xff0…