tabs切换封装

这边记录下日常开发所用到的tas切换组件特此记录下，日后直接拷贝即可，如果需要修改可以按需进行修改即可

子组件

<template>
  <div>
    <el-tabs :v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        :key="index"
        v-for="(item, index) in tabData"
        :label="item"
        :name="index | changeNum"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  //这里做过滤是因为绑定name会类型报错，这边将其过滤为字符串
  filters: {
    changeNum(val) {
      return String(val);
    },
  },
  //调用组件是传过来的两个值
  props: {
    //  tabs数据值
    tabData: {
      type: Array,
    },
    //选中索引值
    activeName: {
      type: [Number, String],
      default: "0",
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    //选中事件，这里我返回了整个tabs，根据所需返回即可
    handleClick(tab) {
      // 选中item
      this.$emit("selectInfo", tab);
    },
  },
};
</script>

<style scoped>
//这边是居中tabs样式
/deep/ .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}
</style>

父组件调用

<title-tap :activeName="activeName" :tabData = 'tabData' @selectInfo="selectInfo"></title-tap>
data() {
   return {
     tabData: ["用户管理", "配置管理", "角色管理", "定时任务补偿"],
     activeName: "0",
   };
}
methods:{
      selectInfo(val){
      console.log(val.index);
    }
}

项目用到的模样