1.设置一个固定值作为key:node-key="id" 2.定义当前选中节点的key::current-node-key="currentId" <el-treenode-key="id":current-node-key="currentId":data="treeData":props="defaultProps":check-on-click-node="true":accordion="true"empty-text="组织机构"icon-class="":filter-node-method="fil...
要自定义tree组件展开折叠图标,最简单的办法莫过于直接改css,无需写复杂的DOM结构,如下 1 <el-tree:data="data" icon-class="icon-tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 /deep/ .icon-tree { margin:05px010px; position...
<el-tree :data="data" node-key="id" :props="defaultProps" @node-click="handleNodeClick"> </el-tree> 1. 2. 在树代码中间,增加span标签,通过:class绑定icon,通过label绑定树的名称 <el-tree :data="data" node-key="id" :props="defaultProps" @node-click="handleNodeClick"> {{ data.lab...
<my-tree ref="myTree" :tree-data="treeData" icon-class="el-icon-star-on" :default-checked-keys="defaultCheckedKeys" :show-checkbox="true" :default-expanded-keys="defaultExpandedKeys" :highlight-current="true" :check-on-click-node="false" :default-props="defaultProps" @nodeClick="nodeCl...
hello,大家好,我是前端小老弟儿。最近在项目中使用了element-ui的tree树形控件,在实际项目的应用过程中,因为对这个控件的api并不熟悉,感觉还是挺麻烦的。通过这个项目,树形控件的基本api都接触了一下,顺便写个文档,加深一下印象。 先展示一下控件的功能
简介:VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线 步骤: 定义模板(做循环遍历处理): <template><el-cardv-for="(item,index) in routeList":key="index"class="routeList-box"><!-- <el-collapse v-model="activeNames"> <el-collapse-item :title...
= data.id&&checkedId != data.id">{{node.label}}</el-tree> 样式elementui 自定义图标 .el-icon-company{background:url(../../../assets/image/frame.png)center no-repeat;background-size:cover;margin-right:6px;}.el-icon-company:before{content:"替";font-size:16px;visibility:hidden;}.el...
<el-tree:data="data"icon-class=" "@node-click="handleNodeClick"><template #default="{node, data}"><templatev-if="node.level === 1">{{data.name}}</template></template></el-tree>
上面是一个tree渲染后的html代码,我们可以看到,每一个节点有一个.el-tree-node__expand-icon的元素,这就是每个项的icon,而.el-tree-node__expand-icon.expanded的元素就是激活后的icon。另外可以看源码发现,这些icon都是用css绘制的,加入以下代码后就可以自定义 //css代码 .el-tree-node__expand-icon{ borde...
.el-tree-node__expand-icon+span::before { display: inline-block; vertical-align: bottom; margin-bottom: -3px; width: 20px; } .el-tree-node__content{ .el-tree-node__expand-icon+span::before { content: url(..//img/sitemap.png); } } .el-tree-node__children{ .el-tree-node__ex...