tab 组件

src/components/install.js

@@ -7,6 +7,8 @@ import saveform from '@/components/save-form'
 import overflowtext from '@/components/overflow-text'
 import selectall from '@/components/select-all'
 import copytext from '@/components/copy-text'
+import tabs from '@/components/tabs'
+import tabsPanel from '@/components/tabs/panel'
 
 export default {
   install(Vue) {
@@ -14,5 +16,7 @@ export default {
     Vue.component(overflowtext.name, overflowtext)
     Vue.component(selectall.name, selectall)
     Vue.component(copytext.name, copytext)
+    Vue.component(tabs.name, tabs)
+    Vue.component(tabsPanel.name, tabsPanel)
   }
 }

src/components/tabs/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-tabs :value="active" @tab-click="tab">
+    <slot/>
+  </el-tabs>
+</template>
+<script>
+export default {
+  name: 'tab-router',
+  props: {
+    searchKey: {
+      type: String,
+      default: 'tabrouter'
+    }
+  },
+  data() {
+    return {
+      active: '',
+      panels: [],
+    }
+  },
+  methods: {
+    getAllPanel() {
+      this.panels = this.$slots.default.filter(item => item.tag && item.tag.indexOf('ElTabPane') > -1)
+    },
+    tab(item) {
+      this.$router.replace({
+        path: this.$route.path,
+        query: {
+          ...this.$route.query,
+          [this.searchKey]: item.name
+        }
+      })
+    }
+  },
+  beforeUpdate() {
+    this.getAllPanel()
+  },
+  beforeRouteEnter(to, form, next) {
+    console.log(to, form)
+    next()
+  },
+  mounted() {
+    this.getAllPanel()
+    if (this.panels.length) {
+      this.active = this.panels[0].child?.name
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+</style>

src/components/tabs/panel.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-tab-pane
+    v-bind="{...$attrs, ...$props}"
+    v-on="$listeners"
+  >
+    <slot/>
+  </el-tab-pane>
+</template>
+<script>
+export default {
+  name: 'dy-tabs-panel'
+}
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/save-form-test/index.vue

@@ -59,6 +59,10 @@
         </div>
       </save-form>
     </div>
+    <tab-router>
+      <el-tab-pane label="1" name="1">12131231</el-tab-pane>
+      <el-tab-pane label="2" name="2">adwqj</el-tab-pane>
+    </tab-router>
     <el-table
       :data="list"
       class="table"