表格 Table

基础用法

	1	李小颖	522	4
	15	杜小浩	462	18
	18	汤小青	482	12
	28	田小锋	475	15
	35	吴小豪	372	41
	41	吴小可	404	33
	46	木小亦	409	40
	43	邹小辉	293	53

<template>
  <bp-table
    :data="list"
    border
    row-key="seat"
    :row-selection="rowSelection"
    v-model:selectedKeys="selectedKeys"
    v-model:selectedKey="selectedKey"
  >
    <template #columns>
      <bp-table-column title="座号" data-index="seat" :width="100">
        <template #cell="{ record }">
          <span style="font-weight: bold">{{ record.seat }}</span>
        </template>
      </bp-table-column>
      <bp-table-column title="姓名" data-index="name" align="center" />
      <bp-table-column title="成绩" data-index="results" :width="100" />
      <bp-table-column title="班级排名" data-index="ranking" :width="100" />
    </template>
  </bp-table>
</template>

<script setup lang="ts">
import { ref } from "vue";

const list = [
  { seat: "1", name: "李小颖", results: "522", ranking: "4" },
  { seat: "15", name: "杜小浩", results: "462", ranking: "18" },
  { seat: "18", name: "汤小青", results: "482", ranking: "12" },
  { seat: "28", name: "田小锋", results: "475", ranking: "15" },
  { seat: "35", name: "吴小豪", results: "372", ranking: "41" },
  { seat: "41", name: "吴小可", results: "404", ranking: "33" },
  { seat: "46", name: "木小亦", results: "409", ranking: "40" },
  { seat: "43", name: "邹小辉", results: "293", ranking: "53" },
];

const selectedKey = ref("");
const selectedKeys = ref([]);
const rowSelection = {
  type: "radio",
  // type: "checkbox",
};
</script>