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

<template>
  <view class="p-30">
    <ie-table :table-columns="tableColumns" :table-config="tableConfig" :data="data">
      <template #name="{ item }">
        <view class="">
          <text class="leading-38">{{ item.name }}</text>
          <text v-if="item.directed"
            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({
  data: {
    type: Array as PropType<Study.KnowledgeRecord[]>,
    default: () => []
  }
});
const tableConfig: TableConfig = {
  border: true,
  stripe: false,
  emptyText: '暂无数据',
  loading: false,
  rowKey: 'id'
}
const tableColumns: TableColumnConfig[] = [
  {
    prop: 'name',
    label: '知识点',
    flex: 2,
    slot: 'name',
    headerAlign: 'center',
    align: 'left'
  },
  {
    prop: 'rate',
    label: '正确率',
    flex: 1,
    slot: 'rate'
  },
  {
    prop: 'total',
    label: '题量',
    flex: 1
  }
]
</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>