el-tabs el-tabs 插槽自定义

el-tab-pane 的 el-tabs__nav-scroll 是 Element Plus 中 el-tabs 组件的内部结构，如果你想在 el-tabs 导航部分 (el-tabs__nav-scroll) 中添加自定义元素，可以通过以下几种方式实现：

方法1: 使用 v-slot 插槽

Element Plus 组件通常支持插槽功能，可以通过自定义插槽的方式在导航部分插入元素。

<template>
  <el-tabs v-model="activeTab" type="card">
    <template #default="{ pane }">
      <div class="custom-nav-element">自定义元素</div>
    </template>
    <el-tab-pane label="Tab 1" name="1">Content 1</el-tab-pane>
    <el-tab-pane label="Tab 2" name="2">Content 2</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1',
    };
  },
};
</script>

<style scoped>
.custom-nav-element {
  /* 自定义样式 */
  margin-right: 20px;
}
</style>

方法2: 使用 before 或 after 插槽

el-tabs 组件提供了 before 和 after 插槽，允许你在导航栏前后插入元素。

<template>
  <el-tabs v-model="activeTab" type="card">
    <template #before>
      <div class="custom-element-before">Before Nav</div>
    </template>

    <el-tab-pane label="Tab 1" name="1">Content 1</el-tab-pane>
    <el-tab-pane label="Tab 2" name="2">Content 2</el-tab-pane>

    <template #after>
      <div class="custom-element-after">After Nav</div>
    </template>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1',
    };
  },
};
</script>

<style scoped>
.custom-element-before {
  margin-right: 10px;
}

.custom-element-after {
  margin-left: 10px;
}
</style>

方法3: 直接修改 DOM 结构

如果你想通过 JavaScript 动态向 el-tabs__nav-scroll 中插入元素，可以通过 mounted 钩子来操作 DOM，不过这种方式不推荐，因为它破坏了组件的封装性：

<template>
  <el-tabs v-model="activeTab" type="card">
    <el-tab-pane label="Tab 1" name="1">Content 1</el-tab-pane>
    <el-tab-pane label="Tab 2" name="2">Content 2</el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '1',
    };
  },
  mounted() {
    const navScroll = this.$el.querySelector('.el-tabs__nav-scroll');
    if (navScroll) {
      const customElement = document.createElement('div');
      customElement.innerText = '自定义元素';
      navScroll.appendChild(customElement);
    }
  },
};
</script>