我们知道树节点常常需要选择,为了看得更加直观明显,所以我们需要设置选中的时候,让选中的那个树节点颜色高亮,本文记录一下常用的三种方式,我们先看一下效果图 效果图 方式一 第一步: el-tree组件标签上添加高亮属性highlight-current,表示要开启高亮功能。
}//使用节点的数据来查找对应的 DOM 节点this.$refs.tree.setCurrentKey(scrollToData) setTimeout(()=>{//根据树id 找到高亮的节let node = document.querySelector('.c-tree-content .is-current');if(node) { setTimeout(()=>{ node.scrollIntoView({block:"center"});//有bug,可尝试}, 500); ...
1.后台返回的数据,这根线上的所有的数据,一条线上的全部返回,但是其他的需要点击的时候调用另外一个接口 2.点击当前的节点调用接口把返回来的数据给当前点击节点的children就好了,然后紧接着把高亮节点 3.高亮节点必须 node-key="orgCode" 和 this.$refs.deptTree.setCurrentKey(this.dialogForm.deptCode); //...
一.Element-UI tree 组件 点击后高亮显示的样式修改(背景色)树,设置check-change时,点击行选中,点击三角符号可以展开,但是颜色不受控制 <el-tree :data="treedata" accordion node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange" ...
eltree不点击根据后端数据来显示高亮 1、首先给el-tree组件标签加上属性highlight-current开启高亮在这里插入图片描述加了这个属性,选中的节点的样式才会有highlight-current类,这样接下来才能改变选中的节点的样式。2、其次设置 el-tree 的“ref” 属性,可以进行操作对
elemet-ui的el-tree设置默认高亮无效 在给el-tree设置高亮的时候, 一直设置不上去,后因为一个小问题, 以免忘记,记录下: 1, 设置node-key 属性 2, 使用nextTick 3, 设置 highlight-current 属性 4, this.$refs.xxx.setCurrentKey('id名称') ......
ctrl+左键点击节点实现多选高亮。 鼠标右键显示的菜单是根据所右键的节点的内容决定的。 不是所有的节点都有删除功能,也就是不是所有文件都是可以删除的,因为项目的某些后台文件删除会导致整个项目跑不起来。但是crtl+左键多选是所有节点都可以选择的,所以删除时需要排除掉不可删除的节点 ...
当然,还有个小细节就是,点击当前节点要高亮显示。 用过el-tree组件的朋友,肯定清楚,el-tree默认只支持多选。而且,除了支持单选,其它需求都可以使用现成的配置属性来实现。 那么问题来了,如何实现单选呢? 2. 实现步骤 2.1 先把全部代码先放上 模版代码: ...
如图所示是粗略实现效果,点击展开左右两个树后高亮显示已选择的节点. 接下来就说说如何实现的 看看current-node-key在文档中的解释, 所以要想让节点高亮,就得设置这个key值 以上是默认高亮显示第一个节点,接下来看看setCurrentKey在文档中的解释 此处使用setCurrentKey方法的时候必须将其放在nextTick中,要等数据更新渲...