一、el-tabs样式修改
如何随意修改el-tabs的样式还有el-tabs嵌套的样式相互隔离，各自只设置各自的样式，互不影响？ 较为简单和清晰的做法：一是使用子代选择器>，让它只在这一层css样式中生效。二是在使用深度选择器的时候，选择较为外层的样式使用深度选择器，然后内部嵌套正常使用。
js
<template>
<div class="test-container">
<h1>字典使用</h1>
<el-tabs class="first-tabs" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="中国" name="china" class="china-tab">
<el-tabs v-model="provinceName" @tab-click="handleProvinceClick">
<el-tab-pane label="河北" name="hebei">河北</el-tab-pane>
<el-tab-pane label="山东" name="shandong">山东</el-tab-pane>
<el-tab-pane label="江苏" name="jiangsu">江苏</el-tab-pane>
</el-tabs>
</el-tab-pane>
<el-tab-pane label="美国" name="usa"> 美国 </el-tab-pane>
<el-tab-pane label="英国" name="uk"> 英国 </el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: "DictUse",
data() {
return {
activeName: "china",
provinceName: "hebei",
};
},
methods: {
handleClick() {},
handleProvinceClick() {},
},
mounted() {},
beforeDestroy() {},
};
</script>
<style scoped lang="scss">
.test-container {
width: 100%;
.first-tabs {
height: 500px;
> :deep(.el-tabs__header) {
.el-tabs__nav-wrap::after{
display: none;
}
.el-tabs__item {
color: green;
font-size: 20px;
padding: 0 20px;
height: 50px;
width: 100px;
line-height: 50px;
border-radius: 6px;
text-align: center;
}
.el-tabs__item.is-active {
color: red;
background-color: rgb(105, 55, 55);
}
.el-tabs__active-bar {
background-color: red;
// display: none;
}
}
.china-tab{
> :deep(.el-tabs__item){
color: blue;
}
:deep(.el-tabs__item.is-active){
color: red;
}
}
}
}
</style>二、el-tabs刷新保留在原el-tabs-pane上，而不是重新跑到默认的选择上。
将v-model绑定的值暂时储存在sessionStorage中，然后在mounted拿取就可以了，然后再跳转到其他路由时，删除。
js
<el-tabs v-model="activeName" @tab-click="handleClick"></el-tabs>
data() {
return {
activeName: "name1",
}
}
methods: {
handleClick(tab, event) {
console.log(tab, event);
sessionStorage.setItem("activeName", tab.name);
},
beforeRouteLeave(to, from, next) {
// 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
// 根据个人需求决定清除的时间
sessionStorage.removeItem("activeName");
next();
},
mounted() {
const nameStore = sessionStorage.getItem("activeName");
// 如果nameStore存在，则说明是在本页面切换的，则拿之前缓存的数据
// 如果nameStore不存在，则说明是路由切换的，则直接拿data中的默认数据
if (nameStore) {
this.activeName = nameStore;
} else {
this.activeName = this.sortedList[0].name;
}
},三、屏幕闪烁问题
因为在切换tabs时，浏览器会重新计算元素的位置和大小，导致dom重绘和回流，从而出现短暂的闪烁 ，尤其是tl-tabs与el-table配合时，我们可以在el-tabs-pane中需要渲染的节点上加v-if="只有当v-model与当前的name相同"
js
<el-table
:data="sortedList"
style="width: 100%"
:height="800"
v-if="activeName === 'name2'" // 关键代码
></el-table>四、当使用遍历来生成el-tabs-pane，删除其中某一个的数据，如何重新定向的问题
当name使用index时，会产生报错问题
所以name最好使用传入进来的数据的属性
但是如果使用传入进来的数据的属性，有个问题，就是删除之后，选中哪个el-tabs-pane。
我们可以使用监听，当传入的数据变化后的数值。发现，当前的name值不在变化后的数据之后（也就是删除了）。就将v-model的值改为新数据的第一个值
js
<!--
* @Author: 不再沉默 [email protected]
* @Date: 2025-04-19 17:10:51
* @LastEditors: 不再沉默 [email protected]
* @LastEditTime: 2025-06-08 16:06:56
* @FilePath: \kkkkkk\src\views\dict-use\index.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="test-container">
<h1>字典使用</h1>
<el-tabs class="first-tabs" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="中国" name="china" class="china-tab">
<el-tabs v-model="provinceName" @tab-click="handleProvinceClick">
<el-tab-pane
v-for="(item) in cityList"
:key="item.value"
:label="item.label"
:name="item.id"
>
<div>{{ item.label }}<el-button type="primary" size="mini" @click="deleteCityClick(item)" style="margin-left: 10px;">删除</el-button></div>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
<el-tab-pane label="美国" name="usa"> 美国 </el-tab-pane>
<el-tab-pane label="英国" name="uk"> 英国 </el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: "DictUse",
data() {
return {
activeName: "china",
provinceName: "0",
cityList: [
{
label: "河北",
value: "hebei",
id:'0'
},
{
label: "山东",
value: "shandong",
id:'1'
},
{
label: "江苏",
value: "jiangsu",
id:'2'
},
],
};
},
watch: {
cityList: {
handler(newVal) {
// 当列表变化时，如果当前选中的值不在列表中，则选中第一个
if (newVal.length > 0) {
if (!newVal.find(item => item.id === this.provinceName)) {
this.provinceName = newVal[0].id;
}
} else {
this.provinceName = "";
}
},
}
},
methods: {
handleClick() {},
handleProvinceClick() {},
deleteCityClick(city) {
this.cityList = this.cityList.filter((item) => item.value !== city.value);
},
},
mounted() {},
beforeDestroy() {},
};
</script>
<style scoped lang="scss">
.test-container {
width: 100%;
.first-tabs {
height: 500px;
> :deep(.el-tabs__header) {
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs__item {
color: green;
font-size: 20px;
padding: 0 20px;
height: 50px;
width: 100px;
line-height: 50px;
border-radius: 6px;
text-align: center;
}
.el-tabs__item.is-active {
color: red;
background-color: rgb(105, 55, 55);
}
.el-tabs__active-bar {
background-color: red;
// display: none;
}
}
.china-tab {
:deep(.el-tabs__header) {
.el-tabs__item {
color: blue;
width: 100px;
text-align: center;
padding: 0 20px 0 0;
}
.el-tabs__item.is-active {
color: red;
}
}
}
}
}
</style>五、总结
这就是目前遇见的关于el-tabs的问题，如果以后遇见了新的问题，会继续总结。