若依VUE前端，实现TABLE页切换

实现效果图，在新增或修改页面添加table表头切换

第一步新建pane.vue文件，代码如下

<template>
  <div class="tabs">
    <div class="tabs-bar">
      <div v-for="(item, index) in navList" @click="handleChange(index)" :class="tabCls(item)">
        {{item.label}}
      div>
    div>
    <div class="tabs-content">
      <slot>slot>
    div>
  div>
template>

<script>
export default {
  name: "tabs",
  props: {
    value: {
      type: [String, Number]
    }
  },
  data(){
    return{
      currentValue: this.value,
      navList: []
    }
  },
  methods: {
    tabCls: function (item) {
      return [
        'tabs-tab',
        {
          'tabs-tab-active': item.name === this.currentValue
        }
      ]
    },
    getTabs: function () {
      return this.$children.filter(function (item) {
        return item.$options.name === 'pane';
      })
    },
    updateNav: function () {
      this.navList = [];
      let _this = this;
      this.getTabs().forEach(function (pane, index) {
        _this.navList.push({
          label: pane.label,
          name: pane.name || index
        });
        if(!pane.name){
          pane.name = index;
        }
        if(index === 0){
          if(!_this.currentValue){
            _this.currentValue = pane.name || index;
          }
        }
      });
      this.updateStatus();
    },
    updateStatus: function () {
      let tabs = this.getTabs();
      let _this = this;
      tabs.forEach(function (tab) {
        return tab.show = tab.name === _this.currentValue;
      })
    },
    handleChange: function (index) {
      let nav = this.navList[index];
      let name = nav.name;
      this.currentValue = name;
      this.$emit('input', name);
      this.$emit('on-click', name);
    }
  },
  watch: {
    value: function (val) {
      this.currentValue = val;
    },
    currentValue: function () {
      this.updateStatus();
    }
  }
}
script>

<style scoped>

style>

第二步新建tabs.vue文件，代码如下.

<template>
  <div class="tabs">
    <div class="tabs-bar">
      <div v-for="(item, index) in navList" @click="handleChange(index)" :class="tabCls(item)">
        {{item.label}}
      div>
    div>
    <div class="tabs-content">
      <slot>slot>
    div>
  div>
template>

<script>
export default {
  name: "tabs",
  props: {
    value: {
      type: [String, Number]
    }
  },
  data(){
    return{
      currentValue: this.value,
      navList: []
    }
  },
  methods: {
    tabCls: function (item) {
      return [
        'tabs-tab',
        {
          'tabs-tab-active': item.name === this.currentValue
        }
      ]
    },
    getTabs: function () {
      return this.$children.filter(function (item) {
        return item.$options.name === 'pane';
      })
    },
    updateNav: function () {
      this.navList = [];
      let _this = this;
      this.getTabs().forEach(function (pane, index) {
        _this.navList.push({
          label: pane.label,
          name: pane.name || index
        });
        if(!pane.name){
          pane.name = index;
        }
        if(index === 0){
          if(!_this.currentValue){
            _this.currentValue = pane.name || index;
          }
        }
      });
      this.updateStatus();
    },
    updateStatus: function () {
      let tabs = this.getTabs();
      let _this = this;
      tabs.forEach(function (tab) {
        return tab.show = tab.name === _this.currentValue;
      })
    },
    handleChange: function (index) {
      let nav = this.navList[index];
      let name = nav.name;
      this.currentValue = name;
      this.$emit('input', name);
      this.$emit('on-click', name);
    }
  },
  watch: {
    value: function (val) {
      this.currentValue = val;
    },
    currentValue: function () {
      this.updateStatus();
    }
  }
}
script>

<style scoped>

style>

第三步：在实现的页面引入tabs.vue文件

import Tabs from "@/components/table/tabs";
import Pane from "@/components/table/pane";
export default {
  	components: {
   	  Tabs,
      Pane,	
  	}
  }

第四步：在页面添加CSS样式

最后一步，添加方法主体

  <div>
   <tabs v-model="activeKey">
    <pane label="中文内容" name="1">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       //添加文本输入框
         el-form>
    pane>
     <pane label="XX内容" name="2">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       //添加文本输入框
         el-form>
    pane>
     <pane label="XX内容" name="3">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       //添加文本输入框
         el-form>
    pane>
     <pane label="XX内容" name="4">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       //添加文本输入框
         el-form>
    pane>
    <pane label="XX内容" name="5">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       //添加文本输入框
         el-form>
    pane>
     tabs>
  div>