el-tab-pane 切换时的下划线添加三角形

你可以使用伪元素 `:after` 来添加一个三角形，并通过 JavaScript 代码来控制三角形的位置。

首先，在 el-tab-pane 标签内部添加一个伪元素 `:after`，设置其 `content` 属性为空字符串，`position` 属性为 `absolute`，`bottom` 属性为 0，`left` 属性为 0，`border-width` 属性为 0，`border-style` 属性为 `solid`，`border-color` 属性为透明、透明、#409EFF、透明，这样就可以形成一个三角形。然后，通过 JavaScript 代码来控制三角形的位置，即当切换到某个 tab 时，设置 `:after` 伪元素的 `left` 属性为当前 tab 的左侧距离。

以下是示例代码：

HTML：

<div class="el-tabs">
  <div class="el-tab-pane">Tab 1</div>
  <div class="el-tab-pane">Tab 2</div>
  <div class="el-tab-pane">Tab 3</div>
</div>

CSS：

.el-tab-pane {
  position: relative;
  padding-bottom: 20px;
}
.el-tab-pane:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-width: 0 8px 10px 8px;
  border-style: solid;
  border-color: transparent transparent #409EFF transparent;
}

JavaScript：

const tabs = document.querySelectorAll(".el-tab-pane");
const tabWidth = tabs[0].getBoundingClientRect().width;
const underline = document.querySelector(".el-tab-pane:after");

function setActiveTab(index) {
  const tab = tabs[index];
  const left = tab.offsetLeft + (tab.offsetWidth - tabWidth) / 2;
  underline.style.left = `${left}px`;
}

// 设置默认选中第一个 tab
setActiveTab(0);

// 监听 tab 切换事件
document.querySelector(".el-tabs").addEventListener("click", e => {
  const target = e.target.closest(".el-tab-pane");
  if (target) {
    const index = Array.prototype.indexOf.call(tabs, target);
    setActiveTab(index);
  }
});