ieplus-app/src/pagesStudy/components/knowledge-table.vue

<template>
  <view class="p-30">
    <ie-table :table-columns="tableColumns" :table-config="tableConfig" :data="data">
      <template #knowledgeName="{ item }">
        <view class="">
          <text class="leading-38">{{ item.knowledgeName }}</text>
          <text
            class="ml-10 bg-[#F0FDF4] text-[#22C55E] border border-solid border-[#22C55E] text-20 rounded-4 px-10 py-2">定向</text>
        </view>
      </template>
      <template #rate="{ item }">
        {{ item.rate }}%
      </template>
    </ie-table>
  </view>
</template>
<script lang="ts" setup>
import { Study, TableColumnConfig, TableConfig } from '@/types';

const props = defineProps({
  studentId: {
    type: Number,
    required: true
  }
});
const tableConfig: TableConfig = {
  border: true,
  stripe: false,
  emptyText: '暂无数据',
  loading: false,
  rowKey: 'id'
}
const tableColumns: TableColumnConfig[] = [
  {
    prop: 'knowledgeName',
    label: '知识点',
    flex: 2,
    slot: 'knowledgeName',
    headerAlign: 'center',
    align: 'left'
  },
  {
    prop: 'rate',
    label: '正确率',
    flex: 1,
    slot: 'rate'
  },
  {
    prop: 'questionNum',
    label: '题量',
    flex: 1
  }
]
const data = ref<Study.StudyRecord[]>([]);
const loadData = async () => {
  // const res = await knowRecords({
  //   studentId: props.studentId
  // });
  // data.value = res.data;
  // 模拟数据
  data.value = [
    { id: 1, knowledgeName: 'CA6140型普通车床电气控制线路的安装接线与故障检修', rate: 100, questionNum: 10 },
    { id: 2, knowledgeName: 'Z3040型摇臂钻床电气控制线路的安装接线与故障检修', rate: 100, questionNum: 10 },
    { id: 3, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 4, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 5, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 6, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 7, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 8, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 9, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 10, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 11, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 12, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 13, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 14, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
    { id: 15, knowledgeName: '零件生产过程基础知识', rate: 100, questionNum: 10 },
  ];
}
onMounted(() => {
  loadData();
});
</script>
<style lang="scss" scoped>
.table-header {
  @apply flex items-center bg-[#EBF9FF] rounded-5;
}

.table-header-cell {
  @apply flex-1 text-center py-20 text-30 text-fore-light;
}
</style>