zoukankan      html  css  js  c++  java
  • elementui树组件el-tree默认选中展开某些节点

    问题1:左侧图标不想要,换个别的

    问题2:通过接口获取树,点击选中某条数据,之后通过接口更新树数据,没有保留选中状态,希望保留

    对于问题1:

    把想要的图标做成精灵图,然后通过background去设置,具体代码如下:

     1     .report_projectSub /deep/ .el-tree .el-icon-caret-right:before {
     2       content: "";
     3       display: inline-block;
     4       font-size: 18px;
     5       height:14px;
     6       text-align: center;
     7       width: 32px;
     8       line-height: 14px;
     9       padding-top:-8px;
    10       background:url(./treeActive.png) no-repeat ;//设置背景,再调整背景位置大小
    11       background-size: 100px;
    12       background-position: -14px -11px;
    13     }
    14     .report_projectSub /deep/ .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    15       content: "";
    16       display: inline-block;
    17       text-align: center;
    18       font-size: 18px;
    19       width: 32px;
    20       height:14px;
    21       text-align: center;
    22       line-height: 14px;
    23       background:url(./treeActive.png) no-repeat;//设置背景,再调整背景位置大小
    24       background-size: 105px;
    25       background-position: -65px -12px;
    26     }
    27     .report_projectSub /deep/ .el-tree .is-leaf:before{
    28       background:none;//去掉最后一层的背景
    29     }

    设置前

    设置后

    问题2:通过接口获取树,点击选中某条数据,之后通过接口更新树数据,没有保留选中状态,希望保留

     <el-tree
         ref="treeSub"//设置ref
         :data="treeData"
         :props="treedefaultProps"
         node-key="id"
         :highlight-current="true"
         :default-expanded-keys="defaultshowKeys"//设置默认选中的属性
         accordion
         @node-click="treeClick"//选择之后,用defaultshowKeys记住现在的选择>

    刷新数据之后,给this.defaultshowKeys赋值当前选中的数据

      this.defaultshowKeys = [this.rightShow.typeId];
      this.$nextTick(()=>{
         this.$refs.treeSub.setCurrentKey(this.rightShow.typeId)//通过设置的ref设置setCurrentKey去渲染tree的默认选中
      })

    好啦,今天的分享就到这里!

  • 相关阅读:
    使用FormData,进行Ajax请求并上传文件
    oracle视图详解
    Unicode和UTF-8之间的关系
    如何访问tomcat所在服务器的其他盘符的资源。
    React首次渲染过程
    react知识点总结
    WebSocket基础
    gulp 批量添加类名 在一个任务中使用多个文件来源
    Chrome浏览器取消INPUT自动记忆下拉框
    Angular7 Drag and Drop
  • 原文地址:https://www.cnblogs.com/jy17/p/15207089.html
Copyright © 2011-2022 走看看