更新

src/components/aboutTable/PageTitle.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="pageTitle" :style="`margin-bottom: ${marginBottom}px;background-color: ${backgroundColor}`">
     <div class="title">
-      <div class="font">{{ title }}</div>
+      <div class="font" v-if="typeof title === 'string'">{{ title }}</div>
+      <ul v-else class="flex" style="align-items: center;">
+        <el-button @click="handleClick(item,index)" :type="active == index ? 'primary':''" v-for="(item, index) in title" :key="index">{{ item }}</el-button>
+      </ul>
     </div>
     <div class="cnetr">
       <slot name="center"></slot>
@@ -13,11 +16,16 @@
 </template>
 
 <script setup>
+import { ref ,defineEmits} from 'vue';
 defineProps({
   title: {
-    type: String,
-    default: ""
+    type: String || Array,
+    default: "" || []
   },
+  active:{
+    type: Number,
+    default: 0
+  }, //下标
   marginBottom: {
     type: Number,
     default: 0
@@ -27,6 +35,11 @@ defineProps({
     default: "rgb(255, 255, 255, 0)"
   }
 });
+const emit = defineEmits(['change','update:active']);
+function handleClick (item,index){ 
+  emit('update:active',index);
+  emit('change',item)
+}
 </script>
  
 <style lang = "scss" scoped>
@@ -50,4 +63,5 @@ defineProps({
     }
   }
 }
+
 </style>