tree.vue
html:
<el-tree class="filter-tree" :empty-text="emptyText" :highlight-current="true" :expand-on-click-node="false" auto-expand-parent :node-key="nodeKey" :lazy = "lazy" :data="data" :props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode" :default-expanded-keys="expandedKkeys" ref="tree"> <div slot-scope="{ node, data }" :class="{'isXm':data.isLeaf, 'isOrg': !data.isLeaf&&!isSeletOrg}"> {{data.name}} </div> </el-tree>
回顯js:
// 回顯默認傳進來的值 setNodeChecked(code) { if(!code){ console.log("code為空") return; } let _this = this this.$nextTick(()=>{ setTimeout(function(){ _this.$refs.tree.setCurrentKey(code); // 根據code設置選中項 let node = _this.$refs.tree.getCurrentNode() // 獲取當前選中項的node,以便獲取label,值 // console.log('編輯的node', node) _this.orgName = node.label _this.$emit('update:node', node) _this.expandedKkeys = [node[_this.nodeKey]] // 用於展開選中項的父級 },1000) }) }, // 重置Tree的數據 restTree(){ // if (this.isSeletOrg) { let _this = this; if(!this.data || this.data.length < 1){ this.emptyText = "數據為空"; }else { this.$nextTick(function(){ let firstNode if (!_this.isSeletOrg) { // 選中組織下面第一個項目節點 firstNode = _this.getFirstNode(_this.data) } else { // 默認選中組織第一個節點 firstNode = _this.data[0] } // console.log('firstNode', firstNode) setTimeout(function(){ if (_this.$refs.tree) { _this.$refs.tree.setCurrentKey(firstNode.code); } },1000) this.orgName = firstNode.label _this.$emit('update:node', firstNode) _this.expandedKkeys = [firstNode[_this.nodeKey]] }) } this.filterText = '' },