TechUI Docs

简中

EN

简中

EN

主题

滚动表格 ​

⭐明星组件

TuiRollingTable 是一个专为数据可视化大屏设计的滚动表格组件。 它基于 TuiRolling 引擎构建，支持表头固定、内容无缝滚动、排行榜高亮以及高度自定义的单元格渲染。不仅支持纯数据驱动渲染，还支持通过插槽嵌入图表、按钮或图片。

基础用法 ​

基础数据渲染 ​

最简单的用法是通过 header 定义表头，并在 TuiRollingTableRow 中传入 data 数组。

  • header: 表头标题数组。
  • visibleLength: 可视区域显示的行数。
html
<script setup>
import { ref } from 'vue';

const tableHeader = ['排名', '地区', '销售额', '占比'];
const tableData = ref([
  [1, '北京', '12,420', '30%'],
  [2, '上海', '10,230', '25%'],
  [3, '广州', '8,100', '20%'],
  [4, '深圳', '6,540', '15%'],
  [5, '成都', '4,320', '10%']
]);
</script>

<template>
  <div style="height: 300px">
    <TuiRollingTable 
      :header="tableHeader" 
      :visibleLength="4" 
      autoRolling
    >
      <TuiRollingTableRow 
        v-for="(row, index) in tableData" 
        :key="index" 
        :index="index" 
        :data="row"
      />
    </TuiRollingTable>
  </div>
</template>

列配置 ​

组件提供了一系列属性来精细控制列的表现。

  • columnWidths: 定义列宽数组。支持数字 (px) 或 null (自动撑开)。
  • columnAligns: 定义对齐方式数组 ('start', 'center', 'end')。
  • hasIndexCol: 是否自动在第一列添加序号。
  • showRankings: 是否开启前三名高亮（需开启 hasIndexCol）。
html
<TuiRollingTable 
  :header="['名称', '类型', '状态', '时间']"
  :columnWidths="[null, 100, 80, 150]"
  :columnAligns="['start', 'center', 'center', 'end']"
  hasIndexCol
  showRankings
>
  ...
</TuiRollingTable>

外观与样式 ​

TuiRollingTable 支持通过 Props 或 CSS Variables 深度定制外观，以适应不同的大屏主题。

Props 方式 ​

直接通过属性设置颜色：

  • headerBG / headerFC: 表头背景与文字颜色。
  • oddRowBG / evenRowBG: 奇偶行背景色（实现斑马纹）。
  • rowBD: 行边框颜色。
html
<TuiRollingTable 
  headerBG="#1a3c6e"
  headerFC="#00ffff"
  oddRowBG="rgba(0, 255, 255, 0.05)"
  rowBD="rgba(0, 255, 255, 0.2)"
>
  ...
</TuiRollingTable>

CSS Variables 方式 ​

在父容器中定义变量，实现更复杂的样式控制（如渐变）。

css
.my-custom-table {
  --tui-rolltb-head-bg: linear-gradient(90deg, #00c6ff, #0072ff);
  --tui-rolltb-head-fc: #fff;
  --tui-rolltb-head-lh: 50px; /* 表头高度 */
  --tui-rolltb-col-fc: #eee;  /* 单元格文字颜色 */
}

高级列类型 ​

通过 columnTypes 属性，可以定义特殊类型的列，如百分比进度条或操作栏。

进度条列 (Percent) ​

设置对应列类型为 'percent'，并配合 progressConfig 配置。

html
<TuiRollingTable 
  :header="['项目', '进度']"
  :columnTypes="[null, 'percent']"
  :progressConfig="{
    unit: '万吨',
    strokeWidth: 12,
    thresholds: { warning: 50, success: 80 }
  }"
>
  ...
</TuiRollingTable>

操作栏列 (Operation) ​

设置类型为 'operation'，并通过 operation 属性定义按钮。监听 @operation 事件处理点击。

html
<script setup>
const ops = [
  { label: "查看", value: "view", type: "primary" },
  { label: "删除", value: "del", type: "danger" }
];
const handleOp = ({ index, row, value }) => {
  console.log('点击了:', value, '行数据:', row);
};
</script>

<template>
  <TuiRollingTable 
    :header="['名称', '操作']"
    :columnTypes="[null, 'operation']"
    :operation="ops"
    @operation="handleOp"
  >
    ...
  </TuiRollingTable>
</template>

插槽自定义 ​

对于更加复杂的内容（如在单元格中放图片、标签或自定义组件），可以使用 TuiRollingTableCol 配合插槽。

提示

当使用插槽模式时，TuiRollingTableRow 不需要传 data 属性，而是直接在内部书写 TuiRollingTableCol。

html
<template>
  <TuiRollingTable :header="['状态', '详情', '操作']">
    <TuiRollingTableRow 
      v-for="(item, index) in list" 
      :key="index" 
      :index="index"
    >
      <TuiRollingTableCol>
        <TuiTag :type="item.status === 'ok' ? 'success' : 'danger'">
          {{ item.status }}
        </TuiTag>
      </TuiRollingTableCol>
      
      <TuiRollingTableCol>{{ item.detail }}</TuiRollingTableCol>
      
      <TuiRollingTableCol>
        <TuiButton size="small" plain @click="doSomething(item)">Audit</TuiButton>
      </TuiRollingTableCol>
    </TuiRollingTableRow>
  </TuiRollingTable>
</template>

API 参考 ​

TuiRollingTable Props ​

属性名类型默认值说明
visibleLengthNumber5核心。可视区域显示的行数。
headerArray[]表头标题数组。
columnWidthsArray[]列宽数组 (px/null)。
columnAlignsArray[]列对齐数组 (start, center, end)。
columnTypesArray[]列类型数组 (string, percent, operation)。
operationArray[]操作栏配置对象数组。
hasIndexColBooleanfalse是否显示序号列。
showRankings
V0.0.6+		Booleanfalse是否开启前三名排名高亮。
headerBGString-表头背景色。
oddRowBGString-奇数行背景色。
evenRowBGString-偶数行背景色。
rowBDString-行边框颜色。
fontColorString-全局文字颜色。
theadHeightNumber-表头高度 (px)。
intervalNumber3000滚动间隔。
modeString'item'滚动模式 (item, page)。
seamlessBooleantrue是否无缝滚动。
fillDataBooleanfalse数据不足是否填充。
progressConfigObject-进度条列配置。
resizeObserverString'global'尺寸监听策略。

TuiRollingTableCol Props ​

属性名类型默认值说明
contentTypeStringnull内容类型提示 (component 等)，用于特殊样式修正。

TuiRollingTableRow Props ​

属性名类型默认值说明
indexNumberRequired行索引。
dataArraynull行数据（纯数据模式使用）。

Emits ​

事件名说明回调参数
operation点击操作栏按钮时触发。{ index, row, value, label }
start开始滚动时触发。-
rolling滚动中触发。(offset)

致谢 ​

Jiaming743
Jiaming743
DataV scrollBoard

此组件是受@jiaminghi/data-view组件库中的 scrollBoard 组件的启发而开发，因为这个组件在早年的工作生涯中是重度使用的组件之一，在后来开发新版的TechUI组件库的时候，感觉此组件功能上可以做一些拓展，所以就基于TechUI组件库中的TuiRolling组件进行了全新开发。