el-tab-pane 自定义插槽,添加el-dropdown
时间: 2023-11-19 09:07:23 浏览: 65
为了在el-tab-pane中添加el-dropdown,我们需要使用自定义插槽。下面是一个简单的例子,演示如何在el-tab-pane中添加el-dropdown。
```html
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="Tab 1" name="1">
<div class="tab-content">
<slot name="tab1"></slot>
</div>
</el-tab-pane>
<el-tab-pane label="Tab 2" name="2">
<div class="tab-content">
<slot name="tab2"></slot>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: '1'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
```
在上面的代码中,我们使用了el-tabs和el-tab-pane组件来创建选项卡。我们还定义了两个自定义插槽,分别用于Tab 1和Tab 2。
现在,我们可以在自定义插槽中添加el-dropdown组件。下面是一个例子:
```html
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="Tab 1" name="1">
<div class="tab-content">
<slot name="tab1"></slot>
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-tab-pane>
<el-tab-pane label="Tab 2" name="2">
<div class="tab-content">
<slot name="tab2"></slot>
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: '1'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
```
在上面的代码中,我们在自定义插槽中添加了el-dropdown组件。我们还使用了el-dropdown-menu和el-dropdown-item组件来创建下拉菜单。