用el-tree控制多个el-drawer的显示隐藏

好的，这是一个常见的需求，您需要在el-tree的节点上添加一个事件，绑定一个方法，在这个方法里面可以动态控制多个el-drawer的显示与隐藏。代码示例如下：

<template>
  <el-tree :data="data" @node-click="handleNodeClick"></el-tree>
  <el-drawer :visible.sync="drawerVisible1">Drawer 1</el-drawer>
  <el-drawer :visible.sync="drawerVisible2">Drawer 2</el-drawer>
  <el-drawer :visible.sync="drawerVisible3">Drawer 3</el-drawer>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: 'Node 1',
          children: [
            {
              label: 'Node 1-1',
            },
            {
              label: 'Node 1-2',
            },
          ],
        },
        {
          label: 'Node 2',
          children: [
            {
              label: 'Node 2-1',
            },
            {
              label: 'Node 2-2',
            },
          ],
        },
      ],
      drawerVisible1: false,
      drawerVisible2: false,
      drawerVisible3: false,
    };
  },
  methods: {
    handleNodeClick(data) {
      if (data.label === 'Node 1-1') {
        this.drawerVisible1 = true;
      } else if (data.label === 'Node 1-2') {
        this.drawerVisible2 = true;
      } else if (data.label === 'Node 2-1') {
        this.drawerVisible3 = true;
      }
    },
  },
};
</script>

这个例子中，我们在el-tree的节点上绑定了一个事件`@node-click`，当用户点击了某个节点时，会触发`handleNodeClick`方法。在这个方法里面，我们根据节点的`label`属性判断哪一个el-drawer需要显示，然后将对应的`drawerVisible`属性设置为`true`即可。由于`drawerVisible`属性使用了`.sync`修饰符，所以我们可以直接通过修改这个属性来控制el-drawer的显示与隐藏。