ieplus-app/src/pagesStudy/pages/study-history/components/student-stat-table.vue

<template>
  <view>
    <ie-table :table-columns="tableColumns" :table-config="tableConfig" :data="data" @rowClick="handleRowClick">
      <template #name="{ item }">
        <view class="flex items-center justify-center gap-10">
          <!-- <ie-image :src="item.avatar" class="w-60 h-60 bg-back" :round="999" /> -->
          <text class="flex-1 min-w-1 ellipsis-1">{{ item.name }}</text>
        </view>
      </template>
      <template #rate="{ item }">
        <text :class="[item.rate < 70 ? 'text-danger' : 'text-fore-title']">{{ item.rate }}%</text>
      </template>
    </ie-table>
  </view>
</template>
<script lang="ts" setup>
import { TableColumnConfig, TableConfig } from '@/types';
import { TeachClass, StudentPlanStudyRecord } from '@/types/study';
const props = defineProps({
  teachClass: {
    type: Object as PropType<TeachClass>,
    default: () => ({})
  },
  data: {
    type: Array as PropType<StudentPlanStudyRecord[]>,
    default: () => []
  }
});
const tableConfig: TableConfig = {
  border: true,
  stripe: false,
  emptyText: '暂无数据',
  loading: false,
  rowKey: 'id'
}
const tableColumns: TableColumnConfig[] = [
  {
    prop: '',
    label: '序号',
    type: 'index',
    flex: 0.5
  },
  {
    prop: 'name',
    label: '姓名',
    slot: 'name'
  },
  {
    prop: 'total',
    label: '题量',
    flex: 0.6
  },
  {
    prop: 'time',
    label: '天数',
    flex: 0.6
  },
  {
    prop: 'rate',
    label: '正确率',
    slot: 'rate'
  }
]
const emit = defineEmits<{
  rowClick: [row: StudentPlanStudyRecord]
}>();
const handleRowClick = (row: StudentPlanStudyRecord) => {
  emit('rowClick', row);
}
// const openKnowledgeDetail = inject(OPEN_KNOWLEDGE_DETAIL);
// const handleRowClick = (row: StudentPlanStudyRecord) => {
//   openKnowledgeDetail?.(row.id, row.name);
// }
</script>
<style lang="scss" scoped></style>