Knowledge_Test_Vue/src/components/WrongQuestion/WrongQuestionTable.vue

<!-- src/components/WrongQuestion/WrongQuestionTable.vue -->
<template>
  <!-- 表格容器，用于展示错题统计数据 -->
  <div class="table-container">
    <!-- 数据表格 -->
    <table>
      <!-- 表头部分 -->
      <thead>
      <tr>
        <th>ID</th>
        <th>题干</th>
        <th>题目类型</th>
        <th>出错次数</th>
        <th>出错率</th>
        <th>推荐课程</th>
        <th>操作</th>
      </tr>
      </thead>
      <!-- 表格主体，循环渲染每条错题数据 -->
      <tbody>
      <tr v-for="item in wrongQuestions" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.questionText }}</td>
        <td>{{ item.type }}</td>
        <td>{{ item.errorCount }}</td>
        <td>{{ item.errorRate }}</td>
        <td>{{ item.recommendedCourse }}</td>
        <td>
          <!-- 查看出错用户按钮 -->
          <button class="btn-red small" @click="viewUser(item)">出错用户</button>
          <!-- 查看题目详情按钮 -->
          <button class="btn-red small" @click="viewQuestion(item)">查看题目</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  // 组件名称：错题统计表格组件
  name: 'WrongQuestionTable',
  // 接收父组件传递的错题数据列表
  props: {
    wrongQuestions: {
      type: Array,
      default: () => []
    }
  },
  // 定义方法
  methods: {
    // 点击“出错用户”按钮时触发，用于查看该题目的错误用户信息
    viewUser(item) {
      console.log('查看出错用户:', item)
    },
    // 点击“查看题目”按钮时触发，用于跳转或显示题目详情
    viewQuestion(item) {
      console.log('查看题目:', item)
    }
  }
}
</script>

<style scoped>
/* 表格容器样式 */
.table-container {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

/* 表格整体样式 */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

/* 表头和表体单元格通用样式 */
th,
td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* 表头样式 */
th {
  background-color: #f2f2f2;
  font-weight: normal;
  color: #333;
}

/* 鼠标悬停行高亮效果 */
tr:hover {
  background-color: #f9f9f9;
}
</style>