【vue】elementUi 里面的tabs标签页使用

在Vue中使用Element UI的<el-tabs>组件可以创建标签页。以下是一个简单的例子：

<template>
  <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>
</template>
 
<script>
export default {
  data() {
    return {
      activeName: 'first',
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

在这个例子中，<el-tabs>组件通过v-model绑定了一个名为activeName的变量，这个变量用于控制当前激活的标签页。每个<el-tab-pane>代表一个标签页，通过label属性设置标签页的名称，name属性是内部的唯一标识。

handleClick方法是一个事件处理函数，它会在标签页被点击时触发。你可以在这个方法中添加自己的逻辑，比如更新数据或者触发其他操作。