首先，确保你已经安装了 Element-React，并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装：
npm install element-react
# 或
yarn add element-react
然后，在你的 Vue 组件中，可以这样使用 Tabs：
<template>
<div>
<h3>Element-React Tabs 标签页</h3>
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="Tab 1" name="tab1">
<p>这是第一个标签页的内容。</p>
</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">
<p>这是第二个标签页的内容。</p>
</el-tab-pane>
<el-tab-pane label="Tab 3" name="tab3">
<p>这是第三个标签页的内容。</p>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { ElTabs, ElTabPane } from 'element-react';
export default {
components: {
ElTabs,
ElTabPane,
},
data() {
return {
activeTab: 'tab1', // 设置默认激活的标签页
};
},
methods: {
handleTabClick(tab) {
console.log(`点击了标签页：${tab.name}`);
},
},
};
</script>
在这个例子中，我们引入了 Element-React 的 ElTabs 和 ElTabPane 组件，并在模板中使用它们。通过设置 v-model 属性来控制当前激活的标签页，通过 @tab-click 事件监听标签页的点击事件。
你可以根据实际需求设置标签页的标签内容、激活的标签页、以及其他样式和配置选项。请参考 Element-React 的官方文档：[Element-React Tabs](https://element-plus.org/#/en-US/component/tabs) 以获取更多详细信息和选项。
转载请注明出处：http://www.zyzy.cn/article/detail/5628/Element-React