vue-model-review/src/components/CheckTable.vue

<template>
  <div class="check-table">
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 总体外观检查 -->
      <el-tab-pane label="总体外观检查" name="appearance">
        <div class="table-content">
          <div v-for="(item, index) in appearanceCheck" :key="index" class="check-item">
            <h4>{{ item.name }}</h4>
            <ul>
              <li v-for="(content, idx) in item.content" :key="idx">{{ content }}</li>
            </ul>
          </div>
        </div>
      </el-tab-pane>

      <!-- 主要参数检查 -->
      <el-tab-pane label="主要参数检查" name="mainData">
        <el-table :data="mainDataCheck" border stripe>
          <el-table-column prop="name" label="检查项目" min-width="150"></el-table-column>
          <el-table-column label="参数要求" min-width="200">
            <template slot-scope="scope">
              <div v-for="(content, idx) in scope.row.content" :key="idx">
                {{ content }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 关键元器件检查 -->
      <el-tab-pane label="关键元器件检查" name="component">
        <div class="component-list">
          <el-collapse v-model="activeComponents" accordion>
            <el-collapse-item 
              v-for="(item, index) in componentCheck" 
              :key="index"
              :name="index"
              :class="{ 'highlighted': highlightedIndex === index }"
            >
              <template slot="title">
                <span class="component-title">
                  <i class="el-icon-document"></i>
                  {{ index + 1 }}. {{ item.name }}
                </span>
              </template>
              <div class="component-content">
                <div class="requirement-title">检查要求：</div>
                <ol>
                  <li v-for="(content, idx) in item.content" :key="idx">
                    {{ content }}
                  </li>
                </ol>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'CheckTable',
  props: {
    appearanceCheck: {
      type: Array,
      default: () => []
    },
    mainDataCheck: {
      type: Array,
      default: () => []
    },
    componentCheck: {
      type: Array,
      default: () => []
    },
    highlightedIndex: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      activeTab: 'appearance',
      activeComponents: null
    }
  },
  watch: {
    highlightedIndex(newVal) {
      if (newVal >= 0) {
        this.activeTab = 'component'
        this.activeComponents = newVal
        this.$nextTick(() => {
          this.scrollToHighlighted()
        })
      }
    }
  },
  methods: {
    scrollToHighlighted() {
      const highlightedEl = this.$el.querySelector('.highlighted')
      if (highlightedEl) {
        highlightedEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
      }
    }
  }
}
</script>

<style scoped>
.check-table {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-tabs >>> .el-tabs__content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.table-content {
  padding: 10px 0;
}

.check-item {
  margin-bottom: 20px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 4px;
}

.check-item h4 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 15px;
}

.check-item ul {
  margin: 0;
  padding-left: 20px;
}

.check-item li {
  margin: 5px 0;
  color: #606266;
  line-height: 1.6;
}

.component-list {
  padding: 10px 0;
}

.component-title {
  font-weight: 500;
  color: #303133;
}

.component-title i {
  margin-right: 8px;
  color: #409eff;
}

.component-content {
  padding: 15px;
  background: #f9f9f9;
  border-radius: 4px;
}

.requirement-title {
  font-weight: 500;
  color: #409eff;
  margin-bottom: 10px;
  font-size: 14px;
}

.component-content ol {
  margin: 0;
  padding-left: 20px;
}

.component-content li {
  margin: 8px 0;
  color: #606266;
  line-height: 1.8;
}

.highlighted {
  animation: highlight-pulse 1s ease-in-out;
}

.highlighted >>> .el-collapse-item__header {
  background: #ecf5ff;
  color: #409eff;
  font-weight: 500;
}

@keyframes highlight-pulse {
  0%, 100% {
    background: transparent;
  }
  50% {
    background: #ecf5ff;
  }
}

@media (max-width: 768px) {
  .el-tabs >>> .el-tabs__content {
    padding: 10px;
  }
  
  .el-tabs >>> .el-tabs__item{
    padding: 0 10px;
  }
  
  .check-item {
    padding: 10px;
  }
  
  .component-content {
    padding: 10px;
  }
  
  .component-content li {
    font-size: 13px;
  }
}
</style>