el-tabs问题解决大总结

一、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: 不再沉默 11412181+xiaguxiaochushi@user.noreply.gitee.com
 * @Date: 2025-04-19 17:10:51
 * @LastEditors: 不再沉默 11412181+xiaguxiaochushi@user.noreply.gitee.com
 * @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的问题，如果以后遇见了新的问题，会继续总结。