vue中el-tabs

el-tabs是Vue.js框架的一个组件，用于创建标签页选项卡。通过el-tabs可以方便地实现多个标签页之间的切换，常用于构建多页面的应用程序。

el-tabs提供了多种选项卡类型：带有标签和内容的标准选项卡、无边框的选项卡、可滚动的选项卡等等。同时，el-tabs还支持自定义选项卡的样式和事件处理函数。

例如，以下代码展示了一个简单的使用el-tabs的示例：

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="标签页一" name="first">标签页一的内容</el-tab-pane>
      <el-tab-pane label="标签页二" name="second">标签页二的内容</el-tab-pane>
      <el-tab-pane label="标签页三" name="third">标签页三的内容</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.label, event)
    }
  }
}
</script>

这段代码中，我们先定义了三个标签页选项卡（通过el-tab-pane组件），然后将它们作为子元素传递给el-tabs组件。我们还使用了v-model指令来绑定当前激活的选项卡名称（即activeName），以便在用户与选项卡交互时进行更新。最后，我们还定义了一个handleClick方法，用于处理选项卡被点击时的事件。