el-tab-pane 样式

### 动态为第一个 `el-tab-pane` 添加自定义样式 在 Element UI 的 `el-tabs` 组件中，可以通过作用域插槽（Scoped Slot）或 CSS 类名动态为特定的 `el-tab-pane` 添加自定义样式。以下是一个完整的解决方案[^1]： #### 使用 `v-if` 或 `v-bind:class` 动态绑定样式 可以利用 Vue.js 的模板语法，通过条件判断或动态绑定类名的方式为目标 `el-tab-pane` 添加样式。例如，在组件中定义一个方法或计算属性来返回目标标签的样式类名。 ```vue <template> <el-tabs v-model="activeName"> <el-tab-pane :class="getTabClass('all')" label="所有" name="all"> <template #label> <span class="custom-label">所有</span> </template> </el-tab-pane> <el-tab-pane label="进行中" name="ongoing"></el-tab-pane> <el-tab-pane label="已过期" name="overdue"></el-tab-pane> <el-tab-pane label="已完成" name="finished"></el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeName: 'all' }; }, methods: { getTabClass(name) { // 根据 name 判断是否为目标 tab if (name === 'all') { return 'first-tab'; // 返回自定义样式类名 } return ''; } } }; </script> <style scoped> .first-tab .custom-label { color: red; /* 自定义颜色 */ font-weight: bold; /* 自定义字体粗细 */ } </style> ``` #### 使用作用域插槽传递自定义参数 如果需要更灵活地控制样式，可以使用作用域插槽（Scoped Slot）。通过将自定义数据绑定到插槽上，并在 `tab-click` 事件中访问这些数据，从而实现动态样式的添加[^2]。 ```vue <template> <el-tabs @tab-click="handleTabClick"> <el-tab-pane> <template #label> <span :class="{ 'first-tab': isFirstTab }">所有</span> </template> </el-tab-pane> <el-tab-pane label="进行中" name="ongoing"></el-tab-pane> <el-tab-pane label="已过期" name="overdue"></el-tab-pane> <el-tab-pane label="已完成" name="finished"></el-tab-pane> </el-tabs> </template> <script> export default { data() { return { isFirstTab: true // 控制第一个 tab 的样式 }; }, methods: { handleTabClick(tab) { this.isFirstTab = tab.index === '0'; // 判断当前是否为第一个 tab } } }; </script> <style scoped> .first-tab { color: blue; /* 自定义颜色 */ font-style: italic; /* 自定义字体样式 */ } </style> ``` #### 注意事项 - 在动态绑定样式时，确保类名唯一性以避免与其他样式冲突。 - 如果需要对多个 `el-tab-pane` 进行动态样式管理，建议使用数组或对象存储每个标签的状态，并通过计算属性生成对应的类名。

以下是一个简单的 el-tabs 和 el-tab-pane 的封装示例： ```vue <template> <div class="my-tabs"> <el-tabs v-model="activeTab"> <el-tab-pane label="Tab 1" name="tab1"> <p>Content of Tab Pane 1</p> </el-tab-pane> <el-tab-pane label="Tab 2" name="tab2"> <p>Content of Tab Pane 2</p> </el-tab-pane> </el-tabs> </div> </template> <script> export default { name: "MyTabs", data() { return { activeTab: "tab1" }; } }; </script> <style scoped> .my-tabs { max-width: 600px; margin: 0 auto; } </style> ``` 在这个示例中，我们创建了一个名为 MyTabs 的组件，它包含了 el-tabs 和两个 el-tab-pane。我们使用 v-model 指令绑定了 el-tabs 的活动标签页，这样在切换标签页时，activeTab 的值也会变化。我们还为 MyTabs 组件设置了一个最大宽度和居中样式。 你可以将这个示例作为模板，根据自己的需要进行修改，以创建符合你需求的 el-tabs 和 el-tab-pane 组件。