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的默認選中
  })

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM