Vue+ElementUI+Tabs实现选项卡|标签页|美化标签页面|局部替换样式|好看的标签页|选项卡

因为elementUI自带的标签页实在太丑了,所以给他美化了以下,样式截图如下

1.使用 css 父级选择器来限制样式覆盖的范围, 不然会全局修改的 代码中最外层的样式 class="home" ,下面定义要覆盖的样式都要以.home为前缀.

2.把原来的边框修改成了圆角.

3.增加标签页之间的间距.

4.增加文字到标签页边框的距离

5.修改背景色, 你也可以自定义颜色

<template>
  <div class="home">
    <div style="margin-bottom: 20px;margin-top: 20px;">
      <el-button
          type="primary"
          @click="addTab(editableTabsValue)"
      >
        新增选项卡
      </el-button>
    </div>
    <el-tabs v-model="editableTabsValue&