一个页面两个el-tree
时间: 2023-10-19 11:55:41 浏览: 56
您好!可以实现一个页面上有两个 el-tree 的方式有很多种,我这里给您提供一种简单的实现方案:
首先,在您的页面中引入两个 el-tree 组件的容器,例如:
```html
<div id="tree1"></div>
<div id="tree2"></div>
```
然后,在页面的 JavaScript 部分,使用 Vue.js 或其他框架来创建两个 el-tree 组件并分别挂载到上面的容器中,例如:
```javascript
new Vue({
el: '#tree1',
data() {
return {
treeData1: [/* 第一个 el-tree 的数据 */]
};
},
template: '<el-tree :data="treeData1"></el-tree>'
});
new Vue({
el: '#tree2',
data() {
return {
treeData2: [/* 第二个 el-tree 的数据 */]
};
},
template: '<el-tree :data="treeData2"></el-tree>'
});
```
在以上代码中,通过 `new Vue` 创建了两个 Vue 实例,分别挂载到了 id 为 "tree1" 和 "tree2" 的容器上,并且分别传入了不同的数据(treeData1 和 treeData2)给两个 el-tree 组件。
这样就可以在同一个页面上实现两个独立的 el-tree 组件了。您可以根据实际需求修改数据和容器的样式。希望对您有帮助!如果还有其他问题,请继续提问。