el-tab-pane 选中样式

以下是优化后的代码： ``` <el-tabs v-model="activeTab"> <el-tab-pane label="全部" name="first"> <div slot="label" @click="backright" style="width: 70px; text-align: center">全部</div> </el-tab-pane> <el-tab-pane label="本月" name="second"> <div slot="label" @click="backright" style="width: 70px; text-align: center">本月</div> </el-tab-pane> <el-tab-pane label="本学期" name="third"> <div slot="label" @click="backright" style="width: 70px; text-align: center">本学期</div> </el-tab-pane> <el-tab-pane label="自定义" name="fourth"> <div slot="label" @click="toggleLeft" style="width: 70px; text-align: center">自定义</div> </el-tab-pane> </el-tabs> ``` 针对优化的细节说明： 1. 将每个 `el-tab-pane` 标签都独立成一行，使代码更加清晰易懂。 2. 在 `el-tabs` 标签上添加 `v-model` 属性，使其能够实时绑定到当前选中的标签页。 3. 将 `div` 标签的 `slot` 属性移动到标签上，使得代码更加简洁。 4. 将 `style` 样式移动到 `style` 标签或者外部 CSS 文件中，使得代码更加简洁易维护。

### 动态为第一个 `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` 进行动态样式管理，建议使用数组或对象存储每个标签的状态，并通过计算属性生成对应的类名。