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 = '' },