用 elementui 写一个左右能折叠的布局，左侧为树形，右侧是iframe

可以使用element-ui中的`el-container`、`el-aside`、`el-main`、`el-tree`和`el-iframe`组件来实现左右能折叠的布局，其中`el-container`、`el-aside`和`el-main`组成了一个三列布局，`el-tree`用于渲染左侧的树形结构，`el-iframe`用于渲染右侧的iframe。

示例代码如下：

<template>
  <el-container>
    <el-aside width="200px" :collapse="isCollapse">
      <el-tree :data="treeData"></el-tree>
    </el-aside>
    <el-main>
      <el-button type="primary" @click="toggleCollapse">
        {{ isCollapse ? '展开' : '折叠' }}
      </el-button>
      <el-iframe :src="url"></el-iframe>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false, // 是否折叠左侧栏
      treeData: [{ label: '节点1' }, { label: '节点2' }, { label: '节点3' }], // 树形数据
      url: 'https://www.baidu.com' // iframe的url
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

上述代码中，我们使用了`el-container`和`el-aside`组件来实现左侧栏，使用了`el-main`组件来实现右侧iframe。在左侧栏中，我们使用了`el-tree`组件来渲染树形结构，将树形数据绑定到`treeData`属性上。在右侧iframe中，我们使用了`el-iframe`组件来渲染iframe，将要加载的url绑定到`url`属性上。在页面中，我们使用了一个`el-button`按钮来控制左侧栏的展开和折叠，将按钮的点击事件绑定到`toggleCollapse`方法上。