sleepwalker_1992
sleepwalker_1992

Element-UI二次封装实现TreeSelect 树形下拉选择组件

========================== 第二次优化 =======================

3、优化组件（实现点击select输入框中的×删除勾选）

Element-UI二次封装实现TreeSelect 树形下拉选择组件_第1张图片

========================== 第一次优化 =======================

2、优化组件（实现改变默认选中）

调用

===========================分割线=========================

1、第一次封装TreeSelect组件

调用及效果

（1）单选

Element-UI二次封装实现TreeSelect 树形下拉选择组件_第2张图片

（2）多选

Element-UI二次封装实现TreeSelect 树形下拉选择组件_第3张图片

你可能感兴趣的:(Element-UI)

  • Web端版本更新提示--前端处理 扶我起来还能学_ 前端javascriptvue.js前端框架
    Web端版本更新提示–前端处理原理：webpack每次打包jshash值不同import{MessageBox}from'element-ui'letlastScripts=[]//最新一次js文件src名constDURATION=5*60*1000//设置5分钟检查更新一次//提取html中的script标签的src属性asyncfunctionextractNewScripts(htmlSt
  • 如何在vue3.0项目中集成Element-plus 卖菜的小白 vue面试vueelement-plus
    一、Element-plus简介Elementplus是一套为开发者，设计师和产品经理准备的基于vue3.0的桌面端组件库。之前在vue2中都使用element-ui，而element-plus是针对vue3开发的一个ui组件库。二、基本使用安装element-plusnpminstallelement-plus2.1、全局引入一种引入element-plus的方式是全局引入的方式，代表的含义是所
  • element-ui 之 InputNumber 组件的步长功能分析 rongrongVivian Element-ui组件库前端javascriptvue.jselementui
    此篇将分析element-ui的InputNumber组件中的步长功能的源代码。一.步长功能描述步长是指接收一个step属性，以传入的step作为步长，每次递增或递减以一个step为单位进行。二.步长与严格步长的区别在InputNumber组件中，如果只是设置了步长，没有设置严格步长，可以通过输入框输入的方式，输入不符合步长的数值。如果一旦设置了严格步长，在输入框中输入不符合步长的数值时，会被计算
  • element-ui 关于树形结构el-tree的笔记
    首先尝试了下懒加载。发现是时候会出现无法加载数据以及数据重新加载的问题，古世勇一次性给加载上去。首先说一次性加载的适用方法先确定tree的配置文件label:'name',chcildren:'children',isLeaf:'leaf'看官网说明label就是你显示ui的值chcildren就是你下级目录的全部数据isLeaf指定一个字段是否为子节点。为ture时不为子节点所以数据结构为dat
  • 解决element-ui中组件【el-upload】一次性上传多张图片的问题 微风拂晚霞 Web前端前端vue.jselement-uiNode.jsmulter
    element-ui中的组件el-upload默认的行为是一张图片请求一次，在项目需求中，通常要求多张图片只向后台发送一次请求，下面的做法就可以解决这样的需求前端发布exportdefault{data(){return{formData:{},}}methods:{//绑定在http-request,覆盖上传事件uploadFile(file){this.formData.append("blo
  • vue + element-ui 季度选择器组件 el-quarter-picker
    使用说明1、复制组件文件ElQuarterPicker.vue到项目（依赖element-ui），组件源码在后面2、引用并调用组件     importElQuarterPickerfrom'./ElQuarterPicker' exportdefault{ components:{ElQuarterPicker}, data(){  return{   value:''  } }}ElQuart
  • el-select下拉选择不回显问题和下拉框显示数字问题
    在使用Vue开发使用element-ui时，el-select下拉框出现在点击选择的时候数据无法显示的问题。解决方案：需要使用forceUpdate强制刷新在没有绑定事件时直接在change上绑定forceUpdate：@change="$forceUpdate()"
  • element-ui手机区号+手机号
    需求场景项目开发中对方要求手机号带上全球区号需求分析项目使用的是若依前端框架，element-ui的框架。尝试使用已经网上的组件vue-country-intl等发现不怎么适配element-ui的样式等。这还不是关键的，关键的是弹窗中使用这些组件发现区号的下拉展示框展示不全，层级存在问题，设置css的z-index等相关属性也不能有效处理。于是决定手搓一个element-ul下拉的区号，支持国际
  • element 消息提示始终只出现一个 孔唯一 vuejavascriptvue.js前端elementui
    原理就不多解释了直接上代码新建js文件用来存放一下代码(js名字可以根据自己喜好命名)我这里直接命名为了message.jsmessage.js//单独引入Message引入之前一定要确定element已经安装import{Message}from'element-ui';letmessageInstance=null;constresetMessage=(options)=>{if(messag
  • element UI防止多个message弹窗，el-message提示只显示最后一个 不怕不管 elementUIvuejsvue.jshtml
    单独一个文件重写messageimport{Message}from'element-ui'letmessageInstance=nullconstresetMessage=(options)=>{if(messageInstance){messageInstance.close()}messageInstance=Message(options)};['error','success','inf
  • 如何让Element UI的Message消息提示每次只弹出一个
    ElementUI的Message消息提示是点击一次触发一次的。在封装接口中调用失败会返回多个弹窗，导致很不友好，所以就出了一下参考解决方案import{Message}from'element-ui'constshowMessage=Symbol('showMessage')classDonMessage{success(options,single=true){this[showMessage
  • webstorm中element-ui标签无法跳转源码 Hong.1948 webstormuiide
    原本用的webstorm2019,之前的项目开发时切实体验过跳转element-ui源码，觉得很香。更新了webstorm至2024，居然不行了，能弹出来提示，但就是找不到定义。不知道是不是2024版本的问题，node_moudles不管我是否手动添加exclude,它显示的都是exclude如下图：下列方式都尝试过了，没用：node_moudules设置为notexcludeLanguage&F
  • 推荐使用：Vue-Cron —— 简易CRON表达式生成器 乌昱有Melanie
    推荐使用：Vue-Cron——简易CRON表达式生成器项目地址:https://gitcode.com/gh_mirrors/vu/vue-cronVue-Cron是一款专为Vue.js和Element-UI设计的高效、易用的CRON表达式生成插件。它能帮助开发者轻松创建和管理定时任务策略，提供直观的界面和完善的国际化支持。项目介绍Vue-Cron提供了一个简洁的交互界面，让用户能够通过可视化的操
  • 【element-ui】el-date-picker 组件 type=“monthrange“ 选择时间段操作异常 生活、追梦者 项目实战业务组件开发uivue.js前端
    element-ui的el-date-picker组件在选择月份区间时发了这么一个bug。在选择起始月份后关闭了选择面板，再次打开后上次选择的值还存在但是看了所有的属性和方法都没有发现可以清除上次选择的值，也在网上各种搜索没找到解决办法，经过各种办法处理后得到了最简单处理方式,就是利用key值的变化重新渲染组件
  • element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options 认知能力训练 element日期选择图标
    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期,订票时间要限制日期范围官网提供了picker-options参数可以设置日期选择范围,具体操作看代码//页面引入组件,加上picker-options这个参数v-model="exCheckDate
  • 【ElementUI】日期选择器时间选择范围限制 前端Joy姐 elementUI
    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细，这里做一个element-ui日期插件的补充。官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。单个输入框的组件代码：情景1:设置选择今天以及今天之后的日期data(){return{pickerOptions0:{disabledDate(time){returntime.g
  • 报错 @import “~element-ui/packages/theme-chalk/src/index“； 资深柠檬精 前端elementui
    报错@import"~element-ui/packages/theme-chalk/src/index";具体报错报错原因具体报错SassError:Can’tfindstylesheettoimport.@import“~element-ui/packages/theme-chalk/src/index”;src\views\login\theme\element-variables.scss
  • Vue + element-ui实现动态表单项以及动态校验规则 洛千陨 Vue项目需求实现vue.js前端
    Vue+element-ui实现动态表单项以及动态校验规则情境项目需要实现一个功能，表单中某个表单项产品id支持动态新增多个产品id表单项，每个产品id表单项都需要有校验规则，校验失败时各自有对应的校验提示重点分析表单对象内字段并非固定，需要根据交互动态新增表单校验规则并非固定，需要根据字段新增动态新增对应校验规则接口提交时并非提交多个产品id字段，需要将多个产品id文本字段整合为一个产品id数组
  • Element-ui中Table表格无法显示 wangshuo（24考研上岸版） vueElementUITablevue.jselementuitable标签
    Element-ui中Table表格无法显示在使用过程中发现样式正常显示但是table就是不显示，研究了一段时间后，发现问题是项目结构的问题当你创建vue和安装el的时候，一定要注意进入到正确的项目文件夹，如果在外面也出现一个package.json文件夹，那就是你安装el的时候没有进入到项目文件夹安装el，导致el安装到项目文件夹外面了，这样el也是能运行的，数据也能传到前端，但就是不显示<
  • elementUI的el-backtop(返回顶部)不生效 时无诳语Imp vueelementuivue.jsjavascript
    1.问题：使用el-backtop时，指定target对象为父级元素后不显示目前我采用的方法是简单粗暴的删除target不指定对象，也是能显现按钮，并且回到顶部。有时间可以研究下Element-ui不用多说，用Vue的基本都会用到它。但是它的官方文档却有些不严谨的地方，最近我就在弄一个返回顶部的功能的时候遇到坑了。废话不多说，先上官方文档示例介绍：Scrolldowntoseethebottom-
  • 输入框无法编辑(使用Element-ui中el-input) BarryKerrigan vue.js前端elementui
             在与后端联调时，可以接收到参数；对input进行编辑使用方法@input进行输出，可以看到输入的内容，但输入框的数据无跟新。问题:视图无更新解决方法:this.$forceUpdate();change(e){this.$forceUpdate();}
  • 在Vue2项目中引入ElementUI详细步骤
    1.使用npm安装ElementUI，安装好后在package.json文件查找element-ui是否安装好npmielement-ui-S2.在main.js中引入element-uiimportVuefrom"vue";importAppfrom"./App.vue";importElementUIfrom'element-ui';import'element-ui/lib/theme-ch
  • 1若依系统配置部署
    若依系统简介若依概述若依微服务版RuoYi-Cloud，基于SpringBoot、SpringCloud&Alibaba、OAuth2的前后端分离的后台管理系统。RuoYi-Cloud是一个JavaEE企业级快速开发平台，基于经典技术组合（SpringBoot、SpringCloud&Alibaba、OAuth2、Vue、Element-UI），内置模块如：部门管理、角色用户、菜单及按钮授权、数据
  • vue + element-ui 季度选择器组件 el-quarter-picker 0716*_zwj vue.jsuijavascript
    最近项目中需要用到季度选择器控件，无奈element-ui框架没有，想着自己实现一个出来，参考的日期选择器实现的参考链接：vue+element-ui季度选择器组件el-quarter-picker-CSDN博客https://blog.csdn.net/qq1370151551/article/details/118811216ElQuarterPicker.vue{{title}}{{view
  • elementuI输入框自动聚焦 m0_47177307 elementuivue.js前端
    需求：需要点击输入框自动聚焦，但是每次只有第一次点击的时候会自动聚焦，第二次无效果{{viewModel.data.name}}成功使用element-ui输入框定义refvue中，第二次点击的时候，页面再次渲染了，需要借助$nextTick，调用focus()方法，获取最新视图onShowInput(){this.$nextTick(()=>{this.$refs.focusInput.focu
  • element-ui 在el-dialog中使用el-checkbox的一些坑 weixin_58195884 uivue.jsjavascript
    js中只需要改变keyTable的值就行了，每次点击更新一次keyTablechangeRead(e,i){this.keyTable=Math.random()//Math.random()是获取一个随机小数来代替key值},
  • element-ui vue2【体验优化】 前端没钱 项目笔记uivue.jselementui
    type=number美化某些情况我们需要设置el-input的type=‘number’，会有上下箭头，很丑：美化代码如下：//隐藏type=number箭头.el-input__inner::-webkit-outer-spin-button,.el-input__inner::-webkit-inner-spin-button{-webkit-appearance:none;}
  • [element-ui] el-input根据内容自适应宽度 533_ element-uivue.js
    changeWidth(e){this.width1=this.value.length*15;}参考：input根据内容自适应宽度
  • 【element-ui】el-autocomplete实现 无数据匹配 益达是我 vue前端vue
    文章目录方法一：使用default插槽方法二：使用empty-text属性（适用于列表类型）总结在使用ElementUI的el-autocomplete组件时，如果你希望在没有任何数据匹配的情况下显示特定的内容，你可以通过自定义模板或者通过插槽（slot）来实现。下面我将提供两种方法来实现当没有数据匹配时显示自定义内容。方法一：使用default插槽el-autocomplete组件提供了一个de
  • elementUI中MessageBox.confirm()默认不聚焦问题处理 新茶十九 #elemen-pluselementui前端javascript
    在项目中使用elementUI的MessageBox.confirm()出现了默认不聚焦的问题，默认确认按钮是浅色的，需要点击一下才会变成正常。面对这种问题，创建新组件，实现聚焦。替换默认的MessageBox.confirm()解决创建components/MessageBoxConfirmWrapper/index.jsimport{MessageBox}from'element-ui'exp
  • 多线程编程之理财 周凡杨 java多线程生产者消费者理财
          现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元 （暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，
  • [Zookeeper学习笔记之三]Zookeeper会话超时机制 bit1129 zookeeper
    首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 Created /zoo-739160015 CONNECTEDCONNECTED .............CONNECTEDCONNECTED CONNECTEDCLOSEDCLOSED
  • SecureCRT快捷键 daizj secureCRT快捷键
    ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w:  删除光标至行首
  • Java 子类与父类这间的转换 周凡杨 java 父类与子类的转换
        最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象 强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。       代码：            
  • 可视化swing界面编辑 朱辉辉33 eclipseswing
          今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。       首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui
  • web报表工具FineReport常用函数的用法总结（文本函数） 老A不折腾 finereportweb报表工具报表软件java报表
    文本函数 CHAR CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。 示例: CHAR(88)等于“X”。 CHAR(45)等于“-”。   CODE CODE(text):计算文本串中第一个字
  • mysql安装出错 林鹤霄 mysql安装
    [root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing...                #####################
  • linux下编译libuv aigo libuv
    下载最新版本的libuv源码，解压后执行： ./autogen.sh   这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： # yum -y install automake # yum -y install libtool     如果提示错误：make: *** No targe
  • 中国行政区数据及三级联动菜单 alxw4616
    近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 哎,自己没办法动手写吧. 现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用   文件说明 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局 发布时间：2014-01-17 15:0
  • 哈夫曼加密文件 百合不是茶 哈夫曼压缩哈夫曼加密二叉树
     在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤;   加密步骤:  1,统计文件中字节出现的次数,作为权值   2,创建节点和哈夫曼树   3,得到每个子节点01串   4,使用哈夫曼编码表示每个字节  
  • JDK1.5 Cyclicbarrier实例 bijian1013 javathreadjava多线程Cyclicbarrier
    CyclicBarrier类 一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 CyclicBarrier支持一个可选的 Runnable 命令，
  • 九项重要的职业规划 bijian1013 工作学习
    一. 学习的步伐不停止        古人说，活到老，学到老。终身学习应该是您的座右铭。        世界在不断变化，每个人都在寻找各自的事业途径。        您只有保证了足够的技能储
  • 【Java范型四】范型方法 bit1129 java
    范型参数不仅仅可以用于类型的声明上，例如   package com.tom.lang.generics; import java.util.List; public class Generics<T> { private T value; public Generics(T value) { this.value =
  • 【Hadoop十三】HDFS Java API基本操作 bit1129 hadoop
      package com.examples.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apache.hadoop.fs.FileStatus; import org.apache.hadoo
  • ua实现split字符串分隔 ronin47 lua split
    LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从 而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函
  • java-从先序遍历和中序遍历重建二叉树 bylijinnan java
    public class BuildTreePreOrderInOrder { /** * Build Binary Tree from PreOrder and InOrder * _______7______ / \ __10__ ___2 / \ / 4
  • openfire开发指南《连接和登陆》 开窍的石头 openfire开发指南smack
    第一步     官网下载smack.jar包     下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 第二步     把smack里边的jar导入你新建的java项目中 开始编写smack连接openfire代码 p
  • [移动通讯]手机后盖应该按需要能够随时开启 comsci 移动
        看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎      但是，对于手机的新设计，有几点我们也要注意      第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,
  • 20款国外知名的php开源cms系统 cuiyadll cms
    内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。 在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 1. Wordpress WordPress的是一个功能强大且易于使用的内容管
  • Java生成全局唯一标识符 darrenzhu javauuiduniqueidentifierid
    How to generate a globally unique identifier in Java http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log http://stackoverflow
  • php安装模块检测是否已安装过, 使用的SQL语句 dcj3sjt126com sql
    SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。 本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T
  • 5天学会一种 web 开发框架 dcj3sjt126com Web框架framework
    web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆 根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握 一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架 各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路 建议把本文
  • Gson使用三(Map集合的处理,一对多处理) eksliang jsongsonGson mapGson 集合处理
    转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述        Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。 二、Map参考实例 package com.ickes.json; import java.lang.refl
  • cordova实现“再点击一次退出”效果 gundumw100 android
    基本的写法如下： document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b
  • openldap configuration leaning note iwindyforest configuration
    hostname // to display the computer name hostname <changed name> // to change go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately dont forget to change /etc/hosts
  • Nullability and Objective-C 啸笑天 Objective-C
    https://developer.apple.com/swift/blog/?id=25   http://www.cocoachina.com/ios/20150601/11989.html   http://blog.csdn.net/zhangao0086/article/details/44409913   http://blog.sunnyxx
  • jsp中实现参数隐藏的两种方法 macroli JavaScriptjsp
    在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////
  • Bootstrap A标签关闭modal并打开新的链接解决方案 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。 可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。   <a href="#/group-buy" class="btn bt
  • 二维数组在Java和C中的区别 流淚的芥末 javac二维数组数组
    Java代码：   public class test03 { public static void main(String[] args) { int[][] a = {{1},{2,3},{4,5,6}}; System.out.println(a[0][1]); } }  运行结果： Exception in thread "mai
  • systemctl命令用法 wmlJava linuxsystemctl
    对比表，以 apache / httpd 为例 任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他