最近新做的项目,有用到Element-UI tree 组件,需求是选中的节点背景颜色改变(默认的太浅了),并且要求操作时数据变动之后的情况下一直保持高亮 css: .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: #409eff; } template代码: js代码:...
1.点击后高亮显示的背景颜色修改(但是不能一直保持不变) .el-tree-node:focus > .el-tree-node__content { background-color: rgb(158, 213, 250) !important; } 这个只要改变css就可以达到效果 2.点击后显示高亮的效果,并且不切换的情况下高亮一直保持 css: .el-tree--highlight-current .el-tree-node...
this.高亮模糊查询的节点递归(this.treeData, null) } }, IptClearClick(event){ // console.log(event) // event.preventDefault(); this.handleIptClear() }, // 清空输入框内容 handleIptClear(){ // console.log('清空输入框内容') //清空选中内容 this.$refs.tree.setCheckedNodes([]) this.value...
2.点击当前的节点调用接口把返回来的数据给当前点击节点的children就好了,然后紧接着把高亮节点 3.高亮节点必须 node-key="orgCode" 和 this.$refs.deptTree.setCurrentKey(this.dialogForm.deptCode); //设置选中,配置highlight-current后,即可高亮 4.计算当前高亮的位置 html <el-dialog:close-on-click-modal...
如图所示是粗略实现效果,点击展开左右两个树后高亮显示已选择的节点. 接下来就说说如何实现的 看看current-node-key在文档中的解释, 所以要想让节点高亮,就得设置这个key值 以上是默认高亮显示第一个节点,接下来看看setCurrentKey在文档中的解释 此处使用setCurrentKey方法的时候必须将其放在nextTick中,要等数据更新渲...
21 // 如果已经是选中的了,那么应该取消选择 22 data.Selected = false; 23 this.leftTreeSelectedArr.map((item, i) => { 24 if (item.id == data.id) { 25 this.leftTreeSelectedArr.splice(i, 1); 26 this.$refs.treeRef.setCurrentKey(); // 取消高亮,要不然区分不出来,是不是没有选中 ...
需求是 在新建任务的时候,选中tree组件中的某条数据,在编辑这个任务的时候,通过后台的数据再次回显tree组件的选择的这条数据 <el-tree ref="tree" class="select-tree" highlight-current :data="options" :props="props" node-key="id" :expand-on-click-node="false" :filter-node-method="filterNode" ...
第二句活 获取 当前 ref是 里面的 refName 你吧refName 设为 vueTree也就是说 var ref = this.$refs.vueTree第三句话 如果 当前 vueTree 被创建了 就是当前的 vue组件中 有这个东西了,因为我们都不知道 vue在什么时间开始创建 虚拟dom则调用 setCurrentKey 放入 key如果当前 vueTree 没被创建 就是说 ...
问题描述 我们知道树节点常常需要选择,为了看得更加直观明显,所以我们需要设置选中的时候,让选中的那个树节点颜色高亮,本文记录一下常用的三种方式,我们先看一下效果图 效果图 方式一 第一步: el-tree组件标签上添加高亮属性 highlight-current ,表示要开启高亮功能。 第二步: 然后在css中深度作用域高亮样式代码即可...
待被选节点的 key, 如果为 null, 取消当前选中的节点 2. 是否自动展开父节点 setCurrentNode 设置节点为选中状态,使用此方法必须设置 node-key 属性 (node, shouldAutoExpandParent=true) 1. 待被选中的节点 2. 是否展开父节点 getNode 根据data 或者 key 拿到 Tree 组件中的 node (data) 节点的 data 或 ...