Table 表格

表格组件，用于展示结构化数据

表格数据

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-table class="demo-table-default" :data="basicData" :columns="basicColumns" />

<!-- 带边框 -->
  <re-table class="demo-table-bordered" :data="basicData" :columns="basicColumns" :bordered="true" />

<!-- 斑马纹 -->
  <re-table class="demo-table-stripe" :data="basicData" :columns="basicColumns" :stripe="true" />

<!-- 无边框 -->
  <re-table class="demo-table-no-border" :data="basicData" :columns="basicColumns" :bordered="false" />

<!-- 空数据 -->
  <re-table class="demo-table-empty" :data="[]" :columns="basicColumns" />

<!-- 自定义样式 -->
  <re-table class="demo-table-custom-style" :data="basicData" :columns="basicColumns" customStyle="margin-top: 10px;" />

<!-- 多列数据 -->
  <re-table class="demo-table-multi-col" :data="multiData" :columns="multiColumns" :bordered="true" :stripe="true" />

<!-- 单行数据 -->
  <re-table class="demo-table-single" :data="singleData" :columns="basicColumns" :bordered="true" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-table />。

API

Table Props

名称	类型	默认值	描述	必传
data	`Array<any>`		表格数据	Y
columns	`Array<any>`		列配置	Y
rowKey	`string`	id	行唯一标识字段	Y
bordered	`boolean`	false	是否显示边框	Y
stripe	`boolean`	false	是否显示斑马纹	Y
height	`string`	''	表格高度	Y
emptyText	`string`	暂无数据	空数据提示文案	Y
loading	`boolean`	false	是否加载中	Y
customStyle	`string`	''	自定义样式	Y

Table Events

名称	参数	描述
row-click	row: any, index: number	行点击时触发
cell-click	row: any, col: any, rowIndex: number, colIndex: number	单元格点击时触发
change	data: Array<any>	值变化时触发

Table Slots

名称	描述
-	-

Swiper 轮播

数据驱动的轮播组件，统一适配小程序、Web、App

Tag 标签

标签组件，用于标记和分类

内容锚点

演示
代码示例
引入
API