表格 Table ​

用于将数据统一展示、分析、操作等。

基础用法 ​

基础的表格数据展示

<template>
  <bp-table border :cols="cols" :data="list"></bp-table>
</template>

<script setup lang="ts">
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 cols = [
  { title: "座号", dataIndex: "seat", width: 100 },
  { title: "姓名", dataIndex: "name" },
  { title: "成绩", dataIndex: "results" },
  { title: "班级排名", dataIndex: "ranking" },
];
</script>

数据选择 ​

目前，你可以通过 selection 属性配置数据的选择

<template>
  <bp-table row-key="seat" :selection="selection" border :data="list" v-model:selected-key="keys">
    <template #columns>
      <bp-table-column title="座号" data-index="seat" width="100"></bp-table-column>
      <bp-table-column title="姓名" data-index="name"></bp-table-column>
      <bp-table-column title="成绩" data-index="results"></bp-table-column>
      <bp-table-column title="班级排名" data-index="ranking"></bp-table-column>
    </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: "43", name: "邹小辉", results: "293", ranking: "53" },
];

const selection = {
  type: "checkbox",
};

const keys = ref([]);
</script>

自定义列渲染 ​

通过 columns 插槽或者 scope.customRender 自定义渲染内容

<template>
  <bp-table border :data="list">
    <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">
        <template #cell="{ record }">
          <bp-button size="small" status="primary">{{ record.name }}</bp-button>
        </template>
      </bp-table-column>
      <bp-table-column title="成绩" data-index="results" />
      <bp-table-column title="班级排名" data-index="ranking" />
      <bp-table-column title="操作">
        <template #cell>
          <bp-link status="danger">删除</bp-link>
        </template>
      </bp-table-column>
    </template>
  </bp-table>
</template>

<script setup lang="ts">
const list = [
  { 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" },
];
</script>

文本省略和提示 ​

设置 ellipsis 和 tooltip 开启文本省略和气泡提示

<template>
  <bp-table border :data="list">
    <template #columns>
      <bp-table-column title="书籍" data-index="name" :width="100"></bp-table-column>
      <bp-table-column title="作者" data-index="author" :width="60">
        <template #cell="{ record }">
          <span style="font-weight: bold">{{ record.author }}</span>
        </template>
      </bp-table-column>
      <bp-table-column title="介绍" data-index="remark" ellipsis tooltip :width="100"></bp-table-column>
    </template>
  </bp-table>
</template>

<script setup lang="ts">
const list = [
  {
    author: "冯唐",
    name: "《活着活着就老了》",
    remark: "冯唐不二之作，93 篇出道封神的经典文章，用风情万种的文字，写通透性情的智慧",
  },
  {
    author: "陈年喜",
    name: "《活着就是冲天一喊》",
    remark: "“矿工诗人”陈年喜让我们看到，普通人的表达如此丰富、精彩。",
  },
  {
    author: "张嘉佳",
    name: "《从你的全世界路过》",
    remark: "本书讲述十年的起伏人生以及小说中那些人物原型在现实生活中的故事。",
  },
  {
    author: "李银河",
    name: "《煮沸人生》",
    remark: "知名学者、社会学家李银河的灵魂告白，写给所有自由、坦荡、精神明亮的年轻人。",
  },
  {
    author: "宽宽",
    name: "《36岁，人生半熟》",
    remark: "这是一个人即将步入中年时的自我反思和发现。27篇随笔篇幅短小而论述入里，有作者寻找自生生命方向之际的刹那体悟，亦是其人生哲学的阶段阐述。",
  },
];
</script>

Table 属性 ​

cols
表格头部列表
Array
[]
data
表格数据
Array
[]
height
固定高度
String
-
loading
加载状态
Boolean
false
border
展示边框
Boolean
false
stripe
斑马纹
Boolean
false
rowKey
行 Key 字段名称
StringNumber
-
selection
选择器配置
SelectionConfig
-
v-model:selectedKey
选择数据的Key
String|[]Number|[]
[]

Table 事件 ​

select
点击行选择器时触发
rowKeys: string|number|Array<string|number>, rowKey: string|number, record: unkown
select-all
点击全选触发
isSelect: boolean
selection-change
选择项发生改变触发
rowKeys: string|number|Array<string|number>

TableColumn 属性 ​

title
列标题
String
-
record
行记录
Object
{}
data-index
列标识字段
String
-
row-index
行下标
Number
-
width
列宽度
NumberString
-
min-width
最小列宽
NumberString
-
align
对齐方式
Enum
left
ellipsis
是否开启文本省略
Boolean
false
tooltip
是否开启文本气泡提示
Boolean
false

Selection 配置 ​

type
选择类型
Enum
-