Elementuiel-tree默认选中第一个,并实现高亮效果 实现效果: 要使用的属性和方法如下: node-key: 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 setCurrentKey:通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性 设置方法: this.$nextTick(()=>{ this.$refs.tree.setCurrentKey(...
1、添加默认样式 法1 适用于element2.0.11 如果想要给el-tree这棵树的第一个节点设置默认样式,我们首先要拿到这颗树,然后取出第一个节点,继而进行操作。 html代码: 所以我们js里要通过你定义的那个id来获得dom节点 var columnTree = document.getElementById("column-tree"); ...
</el-input> <el-option :value="formData.location_name" :label="formData.location_name" class="sel-option"> <el-tree :data="testData" :props="testDataProps" node-key="allName" default-expand-all highlight-current accordion @node-click="handleNodeClick" :filter-node-method="filterNode" ...
如图所示是粗略实现效果,点击展开左右两个树后高亮显示已选择的节点. 接下来就说说如何实现的 看看current-node-key在文档中的解释, 所以要想让节点高亮,就得设置这个key值 以上是默认高亮显示第一个节点,接下来看看setCurrentKey在文档中的解释 此处使用setCurrentKey方法的时候必须将其放在nextTick中,要等数据更新渲...
前言:el-tree使用懒加载方式(由于数据量大)设置默认选中的是父节点的前两个子节点,展开时,发现父节点和所有子节点全选中了,于是打了一下debugger,发现点击展开时,默认走选中的前两个子节点,到第二个节点是时走了reInitChecked方法,父节点的checked属性变成了true,因为父节点变成了true,所以他又将所有子节点都变成...
3.高亮节点必须 node-key="orgCode" 和 this.$refs.deptTree.setCurrentKey(this.dialogForm.deptCode); //设置选中,配置highlight-current后,即可高亮 4.计算当前高亮的位置 html <el-dialog:close-on-click-modal="false"title="修改部门":visible.sync="dialogVisibleDept"width="700px"@close="closeDialog...
:render-content="renderContent"></el-tree> 2、过滤搜索 watch: { filterText(val) { this.$refs.tree.filter(val); }, }, 3、默认高亮效果,单选高亮效果,更改效果this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.selectMrid); //一定要加这个选中了否则样式没有出来 });...
// 新增逻辑:添加默认选中第一个组织的操作 this.currentNodekey = res.data[0].id; this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来 }); 参考地址: 如若安好:element 树的默认选中1 赞同 · 0 评论文章发布...
分析html结构可知，选中高亮节点有特有的class，直接直接jquery获取节点，再通过scrollIntoView显示定位节点 // 默认展开keysthis.defaultExpandedKeys = [highlightRect.nodeKey];this.$nextTick(()=>{ // 获取高亮节点 let highlightNode = $('.el-tree--highlight-current .el-tree-node.is-current>.el...
用element-ui <el-tree> 做一个多级选择, 进行修改的时候默认选中状态,第一次能正确加载.当换行修改其他行时,弹出对话框,第二次不能加载,求大神指点?其中defaultDate: 是页面加载的时候通过created函数渲染的 HTML <el-form-item prop="typeList" label="问题类型"> <el-tree show-checkbox default-expand-al...