vue element Tree 标签 如何设置节点不触发下拉事件 10C

vue element Tree 标签 如何设置节点不触发下拉事件

当点击父节点就会自动展开,导致父节点右边右侧按钮一点击就会触发展开事件。
所以想设置 按钮 点击事件,阻止父节点触发的下拉事件

图片说明

0

1个回答

$(".box1 a").click(function(**event**){
event.stopPropagation();

});
在你的节点上设置点击事件,然后再点击时间里,阻止该事件的冒泡event.stopPropagation()

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
element-ui中下拉菜单子选项click事件不触发问题
将@click改为@click.native='logoutHandle';即可监听选项的点击事件。 退出
使element-tree默认展开节点高亮
element-ui tree组件默认节点高亮问题: Element-ui tree的官方文档中给我们提供了一个接口: default-expanded-keys数组 我们可以将默认展开的节点的key放到数组中,就可以默认展开 但是有一个比较难受的问题是默认展开的节点没有渲染相应的样式(高亮) 在工程中,我tree组件绑定的data一共有两次刷新 第一次是在本地读取数据,将数据渲染出来...
vue element-ui tree 节点加虚线,样式修改
<el-tree ref="tree" :props="defaultProps" current-node-key="1" :load="loadNode" lazy indent="0" node-key="space_id" :default-
【element tree 坑】default-checked-keys会把节点下的所有子节点都选中的大坑!!!
参考:https://segmentfault.com/q/1010000016940282 问题场景: A 是 父节点 B C D 分别是 子节点,当勾选了 B节点,组件返回的数据 是A和B点(关联) 当用这个数组设置组件的 default-checked-keys的默认选中状态时,A下面的 B , C , D都被选中了 解决方案: 额外通过一个属性checkedId来保存选中的节点,...
vue+element 树形组件tree自定义节点
1、下载安装依赖包 npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev 2、项目根目录下新建.babelrc 文件,并写入代码 { "presets": [ ...
Tree 默认展开某个节点
纠结了一天的时间弄这个,大都说的是用xml文件作为数据源的,因为我用的是arrayCollection作为数据源,所以也就没有试,在此不做评论,下面就说下我找到的方法。 根据flex的文档我们可以知道,要展开某个节点主要有两种方法: (1)expandItem,这个方法只展开指定的节点,不会展开子节点。 (2)expandChildOf,这个方法会展开指定节点的子节点。 但是单...
ElementUi el-tree 设置指定级别节点显示复选框(checkbox)
ElementUi el-tree 设置指定级别节点显示复选框(checkbox)1、通过css修改方式(单个应用,相对简单)2、通过源码修改(可作为模板使用,相对复杂) 今天在使用elementUI的tree进行开发时,碰到了一个树中只显示第一个级别的节点的checkbox,经过查找和实验有两种方式。 1、通过css修改方式(单个应用,相对简单) 1.1需要实现效果如图 1.2修改css ...
elementui tree 节点过滤加载对应子节点
element-ui tree 节点过滤加载对应子节点方法,官网例子,不会返回过滤节点 的子节点,这也是总结这篇博客的原因。 //官网例子 <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree class="fil...
vue+element中的el-tree的自定义节点内容相关配置
vue+element中的el-tree的自定义节点内容相关配置 首先需要下载依赖包,此处主要讲需要使用的jsx部分,需要下载: npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-env\ --save-dev 下载babel-plugin-transf
vue elementUI中 tree组件实现哪个子节点自动展开;哪个子节点闭合
html部分片段 node-key属性与default-expanded-keys属性必填,缺一不可 data methods 效果
element-ui tree问题,设置默认选中的节点。点击的时候把获取的节点给后台。改变最底层节点的样式,使他横着排列
<el-tree         :data="roledata"         show-checkbox         default-expand-all         node-key="id"         ref="tree"         highlight-current         :props="defaultProps"                 ...
flex中 Tree树节点内部拖动实例(此实例限制了什么节点可以拖动及拖动到什么位置)...
Flex 中要想控制Tree组件内,节点的拖动位置,需要进行如下操作。   1. 要想真正限制树节点拖动位置,使用简单的拖动事件是不行的,需要重写Tree树组件类。 2. 然后重写Tree树组件的:dragDropHandler 方法。 3. 在使用时,使用重写的树组件。   如下是一个实例:  第一步:重写Tree树组件类:   package zwn { import m...
Vue tree 懒加载(结合联动情况)
一、官方实例 由于在点击节点时才进行该层数据的获取,默认情况下 Tree 无法预知某个节点是否为叶子节点,所以会为每个节点添加一个下拉按钮,如果节点没有下层数据,则点击后下拉按钮会消失。同时,你也可以提前告知 Tree 某个节点是否为叶子节点,从而避免在叶子节点前渲染下拉按钮。 代码实例 <el-tree :props="props1" :load="loadNode1" l...
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改 最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是elementUi框架,在项目中使用element的树形控件的时候遇到点问题,分享给大家。 首先先了解一下树形控件: elementTree 树形控件. 我的项目需求是实现鼠标hover上去的时候在对...
vue elementUI tree树形组件遇到的问题
每次显示隐藏tree组件的时候 tree所有的勾选与展开状态全部回到原始状态操作流程是1.后端拿取tree的数据填充给tree2.有一个button点击 tree显示或隐藏(通过v-if)3.出现的问题 每次显示隐藏 tree所有的勾选与展开状态全部回到原始状态解决方式就是 换成v-show 因为v-if是销毁再渲染 v-show是简单的display的切换...
vue+ elelment-ui +tree树形组件背景颜色的修改,点击节点背景颜色修改设置为其他颜色,或是样式不生效的原因
本文仅作为我在初次学习vue+element-ui路上碰到的一些问题以及解决的办法的记录,不论问题的难易程度,于我而言是一种成长过程的记录,望大佬勿喷。 vue+ elelment-ui +tree树形组件背景颜色的修改,直接在Element官网拷贝过来的树形组件背景颜色是白色,每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图 但是如果我需要用树形组件放在一个黑色背景或其他背景颜色时,树形自...
ElementUI中el-tree节点的操作
其实tree的有些方法用起来是很方便的, this.$refs.tree.getCheckedKeys();这个原生态的方法。官方文档上说的是,返回一个数组。有了这个方法,我们就可以得到选中的每个节点的id,拿到了id,那所有的问题就迎刃而解了。 废话不多说,直接上代码 html <div id="app"> <el-row&am
elementUI的el-tree节点过滤事件
最近用到了elementUI的节点过滤事件,效果如下,当输入关键字搜索的时候,它会将所有含有关键字的节点都显示出来。 废话不多说直接上代码: 1、:filter-node-method这个就是我们的过滤节点的函数, 2、filterText就是我们要过滤的内容 3、我这里给input设置了一个change事件,意味着,每次输入完值,就在该函数里调用过滤节点的方法 html &l...
vue--element-ui--tree组件解决从外部按钮取消选中状态
从外部按钮设置----树的选中状态---以及定点删除对应的清空官方提供的方法是:this.$refs.tree.setCheckedKeys([]); 但这只是清除所有;必须找到清除对应的节点清除勾选状态我采用的办法是,把所有要展示的外部删除按钮的id(和树里面的id是对应的,要设置node-key="id")push在一个新数组里面,上面那个方法例子在下面  <el-tree       ...
element中el-tree控件如何实现自定义懒加载以及根据筛选结果定位节点
从接触vue开发,期间遇到很多问题,哪怕是在使用elementUI的过程中,也会发现有很多东西都需要自己摸索。element提供的组件也并不是能满足所有的需求,所以在使用的基础上我们仍然还需要自己去拓展、去研究。下面我将具体讲述一下自己在实现el-tree这个组件时遇到的问题,以及解决的方案。 首先,我这是使用vue重构jsp页面,所以我都是根据现有的后端接口来实现的el-tree的。那么这个e...
easyui tree文本单击事件切换展开/折叠节点的状态
easyui tree文本单击事件切换展开/折叠节点的状态 $('#menuTree').tree({ url: '/Home/GetAllMenus', lines: true, animate: false, onClick: function (node) { if (node.attribut
验证实现element-ui树形控件的自定义图标及右键菜单(二)
一 前言 之前只实现了对el-tree树形控件初步显示右键菜单,今天对其进一步完善,主要实现如下功能: 1.对菜单进行美化,统一成element-ui风格。 2.右键菜单出现后,点击菜单外其余地方可实现对菜单项的隐藏。 3.右键菜单里放置添加节点和删除节点功能,并加以实现。 二 具体实现 1.查看element-ui的主调色,及其他类似菜单的实现方式,将风格统一。 2.点击空...
elementUI 自定义select-tree下拉树组件
elementUI 自定义select-tree下拉树组件 单选调用(传入字符串):<select-tree :treeData='departAll' :id.sync="returnString"></select-tree> 多选调用(传
elementui树形组件右键自定义增删节点与自定义修改前面icon
之前网上荡了一遍,并没有找到什么好例子,索性自己写个吧。。 代码在github上,https://github.com/chengheai/element-tree 欢迎star,follow,谢谢! 个人博客 :https://chengheai.github.io/ 欢迎交流 其实很简单的了,还是把代码分享一下吧; template <el-aside style="...
vue element UI el-select选择框触发事件(每选择一次则触发一次该事件)
<el-select v-model="selectData.id" @change="selectTrigger(selectData.id)"> <el-option label="请选择" value=""></el-option> <el-option v-for="ite
element-ui Tree节点拖曳相关
树状拖曳设置只能在同一级拖动,不能越级 在Tree元素上添加allow-drop <el-tree draggable :data="classify" node-key="100" ref="treeSort" highlight-current :allow-drop="allowDrop" > 然后在methods方法上加 methods: { ...
vue中使用tree自定义节点时的render-content
学习了一下element-ui的自定义树节点的图表,了解了渲染函数,下面就是借用了别人写的代码说一下自己的理解 <el-tree :data="data2" :props="defaultProps" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false" :...
Vue Treeselect下拉树实现,选择部门下拉树,下拉树菜单
先来看一张最基本的效果图:   介绍 vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持。 具有嵌套选项支持的单个和多个选择 模糊匹配 异步搜索 延迟加载(仅在需要时加载深层选项的数据) 键盘支持(使用Arrow Up&Arrow Down键导航,使用键选择选项Enter等) 丰富的选项和高度可定制 支持各种浏览器 需要Vue 2.2+ 入门 ...
Vue-elementUI el-dropdown 下拉框绑定点击事件
下拉框使用@click没有作用,要使用@click.native <input ref="upload-input" accept="*/*" type="file" style="display:none" @change="handleClick"> <input id="uploadFolder" multiple=""
elementUI 下拉框隐藏时触发相关事件(下拉框下拉显示时不触发)
今天做项目时,用elementUI框架,需要下拉框隐藏时出发某个函数,用了visible-change这个函数,发现点击时会触发两次我自己定义的函数,看了下官网的解释 :下拉框出现/隐藏时触发   如果只想在下拉框隐藏时触发该怎么做呢?下面是解决办法:官网定义:Select Events事件名称说明回调参数change选中值发生变化时触发目前的选中值visible-change下拉框出现/隐藏时触...
验证实现element-ui树形控件的自定义图标及右键菜单(一)
许久不用,element-ui已经更新至2.4.1版本。直接进入今天的正题,前提是node.js的环境还有vue及elment-ui都已经安装了。 element-ui的官方文档中介绍比较粗略,试了许久才成功,因此将其记录。 首先看到自定义节点内容部分,指明了可以在节点区添加按钮或图标。 一 添加节点自定义图标 但所有的实例中却没有看到有图标,自定义部分只有通过按钮增加/删除节点。...
vue使用element-ui,发现用@click事件不生效?
今天用到element-ui里的一个组件,下拉菜单发现在组件里写入@click事件在页面打开以后发现,转译了之后并没有click事件最后发现用@click.native就OK了
SWT 树的展开事件,懒加载
原文来自:Snippet8 SWT中的树可以利用SWT.Expand事件实现懒加载。   public class Snippet8 { public static void main (String [] args) { final Display display = new Display (); final Shell shell = new Shell (disp...
element-ui中Tree 树形自定义节点内容render-content
** 使用render-content不显示树形组件问题解决方法 ** 需要安装transform-vue-jsx npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env –save-dev .babelrc文件中...
vue+element-ui select多选框赋值之后触发change事件和remove-tag事件
由于业务需求,需要在页面上使用element-ui的select多选框的方法,当select为空时,change事件和remove-tag事件可以完美呈现,但是当select中赋值后,change事件和remove-tag事件可以触发,但是页面上没有反应。 <el-select v-model="debt.borrowers" filterable multiple placeholde...
vue element-ui ztree,ztree父节点不显示复选框,而只有子节点显示。后台传json数据不写"nocheck":true
vue + element-ui (el-popover)+ ztree <el-form-item label="处理部门"> <el-input v-popover:processing v-model="linkDispatchName"></el-input> <el-popover ref="processing" p...
vue 中 elementui Dropdown 下拉菜单中 选项的click事件
<el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native="refresh">刷新当前</el-dropdown-item> <el-dropdown-item @click.native="closeTab">关闭当前</el
element ui点击事件不生效
@click这样是不生效@click.native<el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> &amp
ExtJs中实现tree节点,全部是单击展开和收缩效果,和收藏夹点击功能一样
    listeners : {          click : function(node, c) {// 单击节点事件(node是节点对象)                  if(!node.isLeaf()){//不是叶子节点                            node.singleClickExpand = true;//提供单击属性           ...
vue+elementUI中使用 el-autocomplete 实现远程搜索的下拉框需要注意的问题
需要注意的地方:1、后台获取的数组中每一个对象必须要有一个value字段, 因为autocomplete只识别value字段并在下拉列中显示。 2、为什么选择input组件群下的el-autocomplete 而不是select下的远程搜索? 因为点击选中时可获取到选中行的附带信息即一个对象, 而select组件下的远程搜索只能选中点击的字符串。html如下:<el-autocomplete