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

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

先看此效果:

html:

javascript 复制代码
<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>
javascript 复制代码
data: [
    {
        label: '菏泽市',
        children: [
            {
                label: '东明县',
                children:[
                    {
                        label: 'xxx1',
                    },
                    {
                        label: 'xxx2',
                    },
                ]
            }
        ]
    }
],

//此处设置数据结构
defaultProps: {
        children: "children",
        label: "label",
        //这里是让第三级节点不使用收起/展开的图标,配合下方css使用
        isLeaf: (data, node) => {
          if (node.level === 2) {
            return true;
          }
        },
      },
css 复制代码
::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-node:focus > .el-tree-node__content {
    background: transparent;
  }
//取消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;
  }
}

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

相关推荐
www_pp_32 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim1 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
WKK_2 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia2 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia2 小时前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学