el-tree展开收起等一系列操作(只展开一个节点,其他方法实现全部收起/展开只一个不同,还可以滚动到选中的节点位置)

<el-tree :data="Data" ref="tree" class="tree" accordion  node-key="id" :default-expanded-keys="defaultKeys" :highlight-current="true" @node-expand="openNode" @node-collapse="closeNode"  :props="defaultProps" @node-click="handleNodeClick">
</el-tree>
// accordion  只展开一个节点
data(){
	return{
	    Data: [],
	    selectId: null,
		defaultKeys: [], // 默认展开那个
		defaultProps: {
	        children: 'children',
	        label: 'label'
        },
	}
}
methods: {
	handleNodeClick(data, node) { // 点击节点
      console.log(data, node)
      // this.haveTree = false
      if (!node.isLeaf) {
        // 是父节点,则不执行任何操作或给出提示
        console.log(111, this.selectId)
        node.expanded && this.$refs.tree.setCurrentKey(this.selectId)
        return;
      }
      this.selectId = data.id
      console.log(222, this.selectId)
    },
    openNode (data, node, self) {
      console.log(data, node,  999, '展开')
      // this.$refs.tree.setCurrentKey(data.children[0].id)
    },
    closeNode (data, node, self) {
      this.$refs.tree.setCurrentKey(this.selectId) // 收起时仍旧保持选中
      console.log(data, node, 999, '收起')
      // this.$refs.tree.setCurrentKey(data.children[0].id)
    },
    othermethod(){ // 其他操作
    	this.$refs.tree.store._getAllNodes().forEach(node => {
            node.parent.expanded = false
        }) // 把所有节点都关闭,如果嵌套多层就递归处理
		this.defaultKeys = [this.selectId]
        this.$refs.tree.setCurrentKey(this.selectId)
        // document.querySelector('.is-current').scrollIntoView() // 滚动到选中的节点位置
	}
}

你可能感兴趣的:(vue.js,前端,javascript)