当前位置：首页 > news >正文

关于在vue2中使用el-tree的记录

news 2025/6/9 5:11:33

此文章会持续更新在使用el-tree过程中应用到的功能...

先看此效果：

html：

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">//自定义节点内容<span slot-scope="{ data }">//此处if判断是让最后一个节点使用自定义的图标<span v-if="data.children">{{ data.label }} (<span style="color: #fff612">{{data.children.length}}</span>)</span><span v-else><img src="@/assets/images/xx.png" alt="" /> {{ data.label }}</span></span>
</el-tree>

data: [{label: '菏泽市',children: [{label: '东明县',children:[{label: 'xxx1',},{label: 'xxx2',},]}]}
],//此处设置数据结构
defaultProps: {children: "children",label: "label",//这里是让第三级节点不使用收起/展开的图标，配合下方css使用isLeaf: (data, node) => {if (node.level === 2) {return true;}},},

::v-deep {.el-tree {position: relative;cursor: default;background: transparent;color: #fff;}
//取消el-tree自带的hover效果.el-tree-node__content {&:hover {background: transparent !important;color: #fff;}}
//取消el-tree自带的hover效果.el-tree-node.is-current > .el-tree-node__content {background-color: transparent !important;}
//调整普通节点字体大小.el-tree-node__label {font-size: calc(0.5vw);}
//调整一级节点字体大小.el-tree > .el-tree-node > .el-tree-node__content > span {font-size: calc(0.9vw);
}
//自定义收起/展开节点图标的旋转.el-tree .el-tree-node__expand-icon.expanded {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
//自定义收起图标.el-tree .el-icon-caret-right:before {color: #5bb9fc;content: "\e791";}
//自定义展开图标.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {color: #5bb9fc;content: "\e790";}//配合data中defaultProps使用，去掉第三级节点的图标，也可以使用opacity:0.is-leaf::before {display: none;}
}

关于获取自定义收起/展开的图标：