el-tabs实现li的摸样

要使用 ElTabs 实现类似于 `<li>` 的样式，你可以结合使用 ElTabs 和 ElTabPane 组件。下面是一个简单的示例代码，展示了如何使用 ElTabs 来创建带有 `<li>` 样式的标签页：

<template>
  <div>
    <el-tabs v-model="activeTab">
      <el-tab-pane
        v-for="(item, index) in tabs"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <!-- 在这里编写标签页的内容 -->
        {{ item.content }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1', // 默认选中的标签页
      tabs: [
        { label: 'Tab 1', name: 'tab1', content: 'Tab 1 Content' },
        { label: 'Tab 2', name: 'tab2', content: 'Tab 2 Content' },
        { label: 'Tab 3', name: 'tab3', content: 'Tab 3 Content' }
      ]
    };
  }
};
</script>

在上面的代码中，我们使用了 `el-tabs` 组件作为标签页的容器，使用 `v-model` 来绑定当前选中的标签页。`el-tab-pane` 组件用于定义每个标签页的内容，通过 `v-for` 循环来生成多个标签页。

你可以根据自己的需求进一步自定义标签页的样式，比如添加样式类、调整字体大小和颜色等。希望这个示例能帮助到你！如果有更多问题，请随时提问。