elementui 标签页标记条数
时间: 2023-08-21 20:06:48 浏览: 90
在 Element UI 中,可以使用 `el-badge` 组件来在标签页上标记条数。这里是一个示例代码:
```html
<el-tabs>
<el-tab-pane label="标签1">
<span slot="label">标签1</span>
<el-badge :value="5" class="tab-badge">
<template slot="content">
标签1内容
</template>
</el-badge>
</el-tab-pane>
<el-tab-pane label="标签2">
<span slot="label">标签2</span>
<el-badge :value="10" class="tab-badge">
<template slot="content">
标签2内容
</template>
</el-badge>
</el-tab-pane>
</el-tabs>
<style scoped>
.tab-badge {
margin-left: 5px;
}
</style>
```
在上面的代码中,我们使用了 `el-badge` 组件来在每个标签页上显示标记条数。通过 `:value` 属性可以设置标记的数值。同时,我们使用了 `slot` 来自定义标签的样式和内容。
请根据你的实际情况调整代码,并为 `el-tabs` 和 `el-tab-pane` 组件添加其他属性和事件以满足你的需求。
阅读全文