Table 表格

用于展示大量结构化数据

这个表格只是一个简单的数据展示功能，只包含有固定表头和列、排序功能。如果当前组件不能满足需求需要使用更多功能的时候，可以考虑使用 TanstackTable

引用

import { regist, Table } from "litos-ui";

regist(Table);

演示

基础用法

先通过 setColumns() 定义列, 再通过 setData() 定义数据源；如果需要最后一列操作列，则可以通过给元素定义 data-action 属性，然后监听 table 的 action 事件。

斑马纹

表格默认带斑马纹，可以通过设置 stripe 为 off 来取消斑马纹

边框

默认情况下，Table 组件是不具有竖直方向的边框的， 如果需要，可以使用 border 属性，把该属性设置为 on 即可启用。

空表格

数据列表没有数据时，显示空表格

固定表头和列

设置 fixed-head 属性即可实现固定表头。将需要固定的列设置 fixed 为 left 或 right，就能实现固定列。

可以通过 max-height 来设置表格的最大高度, 以更好的适配固定 head

如果需要改变滚动条样式，引入 滚动条样式，然后给 table 添加 l-scrollbar

排序

给列的选项增加 sorter 为 true、default、(a,b)->number 来启用排序，同时配置 key 字段标记排序 key；可以通过 setDefaultSort 设置初始排序；如果 sorter=true 就能启用手动排序，这个时候会触发一个sorter 事件

API

Table Attibutes

参数	说明	类型	默认值
-	-	-	-

Table Slots

名称	说明
default	内容

Table Events

事件名	说明	回调参数
click	点击按钮时触发	(event: Event)

Table Methods

方法名	说明	类型
-	-	-

Table CSS Variables

变量名	说明	默认值
--l-table-td-padding	单元格内边距	10px
--l-table-th-padding	表头单元格内边距	var(--l-table-td-padding)
--l-table-max-height	表格最大高度	100%
--l-table-layout	表格布局; auto、fixed	auto