問題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的默認選中 })
好啦,今天的分享就到這里!