关于在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;
  }
}

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

相关推荐
hz.ts8 分钟前
Angular 国际化
javascript·ecmascript·angular.js
6武78 分钟前
Vue 数据传递流程图指南
前端·javascript·vue.js
goto_w12 分钟前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
夏天想19 分钟前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant
....49224 分钟前
antvX6节点全选后鼠标通过拖拉调整视图的展示位置
javascript·计算机外设·数据中台·antvx6
samuel9181 小时前
axios取消重复请求
前端·javascript·vue.js
苹果酱05671 小时前
Golang标准库——runtime
java·vue.js·spring boot·mysql·课程设计
滿1 小时前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧1 小时前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快1 小时前
Lodash源码阅读-baseClone
前端·javascript·源码阅读