element-plus中想在tabs右边放个自定义内容？

Question

我想在tabs的右边放个自定义的内容，这个怎么实现？

Answer 1

.el-tabs__nav{
  position: relative;
    display: flex;
    width: 100%;
}
.el-tabs--top .el-tabs__item.is-top:nth-child(2){
  margin-right: auto;
}

https://codepen.io/1127056420/pen/dPbNyZM

Answer 2

一般来说都会有一个右侧的 slot。文档中对应的就是 #添加按钮自定义图标 - Tabs 标签页 | Element Plus

就是需要改一下样式

<template>
  <div class="demo">
    <el-tabs v-model="editableTabsValue" type="card" editable>
      <template #add-icon>
        <div>这里是一段显示在右侧的文本内容</div>
      </template>
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        {{ item.content }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.demo {
  >>> .el-tabs__new-tab {
    width: auto
  }
}
</style>

<script lang="ts" setup>
import { ref } from 'vue'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])

</script>

🌰 Element Plus Playground