表格

用于展示多条结构类似的数据。

基础用法

indexID名称操作
0 1名字1
1 2名字2
2 3名字3
3 4名字4
<cb-table :data="list">
  <cb-table-column label="index">
    <template #default="{ item, index }">
      {{ index }}
    </template>
  </cb-table-column>
  <cb-table-column label="ID" data-key="id" />
  <cb-table-column label="名称" data-key="name" />
  <cb-table-column label="操作" width="100">
    <template #default>
      <cb-button block small>编辑</cb-button>
    </template>
  </cb-table-column>
</cb-table>

属性

参数说明类型可选值默认值
data列表数据array / object——
empty-text内容为空的时候显示的文案string—暂无内容
row-key行数据的 Key，用来优化 Table 的渲染。只用于列表数据是数组的情况下，其默认值为数组索引。如有多层对象，可以使用 a.b.c.d 的方式。string——
hoverhover 风格的表格boolean—true
stripedstriped 风格的表格boolean—true
borderedbordered 风格的表格boolean—false
condensedcondensed 风格的表格boolean—false

cb-table-column 属性

参数说明类型可选值默认值
label列头标题string——
data-key此列数据的对象 key，如果数据有多层对象，可以使用 a.b.c.d 的方式string——
width此列宽度，单位像素string / number——
type表格显示数据的方式，如为 image 则会使用 <img> 标签显示数据stringtext / imagetext
data-css-class给此列单元格包裹一个 div 并使用此值设置 class 属性string——
prefix显示单元格内容的时候附加的前缀字符串string——
postfix显示单元格内容的时候附加的后缀字符串string——
array-separator用于设置单元格显示数组时候的分隔符string—,
show-array-by-line设置是否按行显示数组（用 <p> 标签包裹每个数组元素）boolean—false
replace用于替换单元格内容，与 replace 函数一样，数组第一个元素为要替换的内容（支持正则），数组第二个元素为替换成的内容array——
default-text用于当前单元格没有内容的时候默认显示的文本string——

cb-table-column 插槽

名称说明
label用于自定义表头内容。
default作用域插槽，用于自定义单元格内容，插槽提供 item 和 index，index 表示行索引，item 表示当前行数据。