操作element-ui组件库中el-tree树形组件单个节点展开关闭

操作element-ui组件库中el-tree树形组件单个节点展开关闭

1、在el-tree组件中定义node-key

:data="treeList"
ref="tree"
node-key="id"
// 定义node-key为id

data () {
    return {
        treeList:[
        {
          id: 1,
          title: "餐饮",
        },
        {
          id: 2,
          title: "娱乐",
        },
        {
          id: 3,
          title: "服饰",
        },
        ]
    }
}

2、获取dom节点后使用树形组件的方法

// 当前节点id
const nodeId = treeList[0].id
// 设置当前节点
this.$refs.tree.setCurrentKey(nodeId);
// 获取当前节点属性
this.$refs.tree.store.nodesMap[nodeId]；

3、展开/关闭当前节点

// 展开/关闭当前节点
this.$refs.tree.store.nodesMap[nodeId].expanded = true/false;

注意：避免出现dom更新错误，要将整个操作放到nexttick里