Knowledge_Test_Vue/src/components/Question/QuestionTable.vue

<template>
  <!-- 表格容器 -->
  <div class="table-container">
    <!-- 题目数据表格 -->
    <table>
      <!-- 表头部分 -->
      <thead>
      <tr>
        <th>ID</th>
        <th>题干</th>
        <th>题目类型</th>
        <th @click="sort('errorCount')" class="sortable">
          <div class="sort-header">
            出错次数
            <span v-if="sortField === 'errorCount'" class="sort-icon">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 10L12 15L17 10" stroke="#e74c3c" stroke-width="2" />
        <path d="M12 15V3" stroke="#e74c3c" stroke-width="2" />
      </svg>
    </span>
          </div>
        </th>
        <th @click="sort('errorRate')" class="sortable">
          <div class="sort-header">
            出错率
            <span v-if="sortField === 'errorRate'" class="sort-icon">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7 10L12 15L17 10" stroke="#e74c3c" stroke-width="2" />
        <path d="M12 15V3" stroke="#e74c3c" stroke-width="2" />
      </svg>
    </span>
          </div>
        </th>

        <th>推荐课程</th>
        <th>操作</th>
      </tr>
      </thead>
      <!-- 表格主体部分 -->
      <tbody>
      <!-- 示例数据行 -->
      <tr v-for="item in sortedItems" :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">查看</button>
          <button class="btn-red small">修改</button>
          <button class="btn-red small">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
export default {
  name: 'QuestionTable',
  data() {
    return {
      sortField: '', // 当前排序字段
      sortDirection: 'asc', // 排序方向：asc 或 desc
      items: [
        {
          id: 1,
          questionText: '以下哪项不是股票的基本特征？',
          type: '股票知识',
          errorCount: 50,
          errorRate: '50%',
          recommendedCourse: '量能擒牛'
        },
        {
          id: 2,
          questionText: '基金的风险主要来源于？',
          type: '基金知识',
          errorCount: 30,
          errorRate: '30%',
          recommendedCourse: '基本面分析'
        }
      ],
      sortedItems: [] // 用于存储排序后的结果
    }
  },
  // computed: {
  //   sortedItems() {
  //     if (!this.sortField) {
  //       // 默认按 ID 升序
  //       return this.items.sort((a, b) => a.id - b.id)
  //     }
  //
  //     return this.items.sort((a, b) => {
  //       const aValue = a[this.sortField]
  //       const bValue = b[this.sortField]
  //
  //       // 处理数字和字符串
  //       if (typeof aValue === 'number' && typeof bValue === 'number') {
  //         return this.sortDirection === 'asc' ? aValue - bValue : bValue - aValue
  //       } else {
  //         const strA = String(aValue).toLowerCase()
  //         const strB = String(bValue).toLowerCase()
  //         return this.sortDirection === 'asc'
  //             ? strA.localeCompare(strB)
  //             : strB.localeCompare(strA)
  //       }
  //     })
  //   }
  // },
  watch: {
    sortField: {
      handler() {
        this.updateSortedItems()
      },
      immediate: true // 初始时执行一次
    },
    sortDirection: {
      handler() {
        this.updateSortedItems()
      },
      immediate: true
    }
  },

  methods: {
    updateSortedItems() {
      if (!this.sortField) {
        this.sortedItems = [...this.items].sort((a, b) => a.id - b.id)
        return
      }

      const sorted = [...this.items].sort((a, b) => {
        const aValue = a[this.sortField]
        const bValue = b[this.sortField]

        if (typeof aValue === 'number' && typeof bValue === 'number') {
          return this.sortDirection === 'asc' ? aValue - bValue : bValue - aValue
        } else {
          const strA = String(aValue).toLowerCase()
          const strB = String(bValue).toLowerCase()
          return this.sortDirection === 'asc'
              ? strA.localeCompare(strB)
              : strB.localeCompare(strA)
        }
      })

      this.sortedItems = sorted
    },
    sort(field) {
      if (this.sortField === field) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortField = field
        this.sortDirection = 'asc'
      }
    }
  }

}
</script>


<style scoped>

/* 修改操作列按钮间距 */
td:last-child {
  display: flex;
  gap: 16px; /* 将间距设置为16px */
}

th {
  display: table-cell !important;
  vertical-align: middle !important;
}

/* sort-header 样式 */
.sort-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 排序图标样式 */
.sort-icon svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #e74c3c;
  stroke-width: 2;
  transition: transform 0.2s;
}
/* 表格容器样式 */
.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;
  cursor: pointer; /* 添加鼠标指针 */
  user-select: none; /* 防止文字选中 */
}

/* 可排序列样式 */
.sortable {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 排序图标样式 */
.sortable svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #e74c3c;
  stroke-width: 2;
  transition: transform 0.2s;
}

/* 悬停效果 */
th:hover {
  background-color: #e0e0e0;
}

/* 表格行悬停效果 */
tr:hover {
  background-color: #f9f9f9;
}



</style>