vue3el-tabs水平居中

对于这个问题，你可以参考以下代码实现： <template> <div class="tabs-container"> <div class="tabs-header"> <div class="tabs-header-item" v-for="(tab, index) in tabs" :key="index" :class="{ active: activeIndex === index }" @click="activeIndex = index"> {{ tab }} </div> <div class="tabs-header-underline" :style="{ width: underlineWidth + 'px', left: underlineLeft + 'px' }"></div> </div> <div class="tabs-content"> <slot></slot> </div> </div> </template> <script> export default { name: 'ElTabs', props: { tabs: { type: Array, default: () => [] } }, data() { return { activeIndex: 0, underlineLeft: 0, underlineWidth: 0 } }, mounted() { this.setUnderline() }, methods: { setUnderline() { const header = this.$refs.header const activeItem = header.getElementsByClassName('active')[0] this.underlineLeft = activeItem.offsetLeft this.underlineWidth = activeItem.offsetWidth } }, watch: { activeIndex() { this.setUnderline() } } } </script> <style scoped> .tabs-container { position: relative; } .tabs-header { display: flex; justify-content: center; align-items: center; } .tabs-header-item { padding: 10px 20px; cursor: pointer; } .tabs-header-item.active { font-weight: bold; } .tabs-header-underline { position: absolute; bottom: 0; height: 2px; background-color: #409EFF; transition: all 0.3s ease-in-out; } </style> 这个组件可以实现一个基本的选项卡功能，其中下划线的位置和宽度会随着选项卡的切换而变化，从而实现水平居中的效果。

### Vue 3.0 中使用 Element Plus `el-tabs` 和 `el-table` 在 Vue 3.0 中集成并使用 Element Plus 的 `el-tabs` 和 `el-table` 组件可以按照以下方式完成。 #### 安装依赖 首先，确保已经安装了必要的库： ```bash npm install element-plus ``` #### 导入样式和组件 为了使项目能够正常渲染这些组件，需导入相应的 CSS 文件以及按需加载所需组件。可以在项目的入口文件（通常是 main.js 或者 setup.js）中执行此操作： ```javascript import { createApp } from 'vue' import App from './App.vue' // Import the entire library's style (optional, recommended to import on-demand styles instead) import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(ElementPlus).mount('#app') ``` 对于按需引入，则推荐采用工具如 babel-plugin-component 来减少打包体积。 #### 使用 `el-tabs` 和 `el-table` 接下来是在页面上实际应用这两个组件的例子。这里给出一个简单的例子来说明如何创建带有表格数据展示功能的标签页结构[^1]。 ```html <template> <div id="app"> <!-- Tab navigation --> <el-tabs v-model="activeName" @tab-click="handleClick" stretch> <el-tab-pane label="用户管理" name="users"> <h2>用户列表</h2> <el-table :data="tableData.users" stripe border> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="email" label="邮箱地址"></el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="订单查询" name="orders"> <h2>订单详情</h2> <el-table :data="tableData.orders" stripe border> <el-table-column prop="orderId" label="订单号"></el-table-column> <el-table-column prop="productName" label="商品名称"></el-table-column> <el-table-column prop="price" label="价格(元)"></el-table-column> <el-table-column prop="status" label="状态"></el-table-column> </el-table> </el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeName: "users", tableData: { users: [ { id: 1, name: "张三", email: "[email protected]" }, { id: 2, name: "李四", email: "[email protected]" } ], orders: [ { orderId: "#123456789", productName: "笔记本电脑", price: 6999, status: "已发货" }, { orderId: "#987654321", productName: "智能手机", price: 2999, status: "待付款" } ] } }; }, methods: { handleClick(tab, event) { console.log(tab, event); } } }; </script> ``` 上述代码展示了两个主要部分：一个是通过设置 `stretch` 属性让 tab 更加美观地填充容器宽度；另一个则是利用 `el-table` 显示不同类型的数据集——分别是用户信息表单和订单记录表单。 #### 自定义样式调整 如果希望进一步自定义外观，比如居中显示标签栏或者去除默认底边线效果，可以通过覆盖原有类名的方式来进行CSS修改。例如要实现居中的标签栏布局可参照提供的解决方案，而要去除底部灰色线条则可能涉及到更深入的研究因为这取决于具体版本的支持情况[^2]。