Trixyon UI 组件库

Table 组件演示

上拉加载表格

ID
姓名
年龄
地址
1
张三
20
北京市朝阳区
2
李四
25
上海市浦东新区
3
王五
30
广州市天河区

已加载数据: 3 条

是否还有更多数据: 是

使用 spanMethod 合并单元格表格

ID
Name
Amount 1
Amount 2
Amount 3
12987122
Tom
234
3.2
10
Tom
165
4.43
12
12987124
Tom
324
1.9
9
Tom
621
2.2
17
12987126
539
4.1
15

此表格展示了使用 spanMethod 实现的单元格合并功能，类似于 Element Plus 的实现方式

合并单元格表格 (行/列合并)

ID
姓名
部门
职位
薪资
入职日期
1
张三
开发部
前端工程师
12000
2022-01-15
2
李四
后端工程师
13000
2022-02-20
3
王五
设计部
UI设计师
11000
4
赵六
UX设计师
11500
2022-04-05
5
钱七
产品部
产品经理
15000
2022-05-12

此表格展示了单元格合并功能，通过 colSpan 和 rowSpan 实现

固定列表格

ID
姓名
邮箱
电话
部门
职位
入职日期
操作
1
张三
2
李四
3
王五
4
赵六
5
钱七
zhangsan@example.com
13800138001
开发部
前端工程师
2022-01-15
lisi@example.com
13800138002
设计部
UI设计师
2022-02-20
wangwu@example.com
13800138003
产品部
产品经理
2022-03-10
zhaoliu@example.com
13800138004
运营部
运营专员
2022-04-05
qianqi@example.com
13800138005
市场部
市场经理
2022-05-12

基础表格

ID
姓名
年龄
地址
1
张三
20
北京市朝阳区
2
李四
25
上海市浦东新区
3
王五
30
广州市天河区
4
赵六
35
深圳市南山区
5
钱七
28
杭州市西湖区

可选择表格

姓名
部门
薪资
张三
开发部
12000
李四
设计部
10000
王五
产品部
11000
赵六
运营部
9000
钱七
市场部
9500

已选择: 1, 3

可编辑表格

产品
价格
库存
笔记本电脑
5999
50
台式机
4999
30
显示器
1999
80
键盘
299
120
鼠标
99
200

带状态的表格

订单名称
状态
金额
订单1
成功
1200
订单2
警告
800
订单3
危险
2500
订单4
信息
1500
订单5
成功
3200

树形数据表格

名称
类型
大小
修改时间
父节点1
folder
2.4GB
2023-01-15
父节点2
folder
1.8GB
2023-01-20
父节点3
file
3.2GB
2023-01-25

排序和过滤表格

商品名称
分类
价格
库存
评分
苹果
水果
5.5
100
4.5
香蕉
水果
3.2
150
4.2
胡萝卜
蔬菜
2.8
80
4
西兰花
蔬菜
4.5
60
4.3
牛肉
肉类
45
40
4.7

虚拟滚动表格 (大数据量测试)

ID
姓名
邮箱
年龄
分数
部门
1
用户1
user1@example.com
66
59
开发部
2
用户2
user2@example.com
24
69
运营部
3
用户3
user3@example.com
55
22
运营部
4
用户4
user4@example.com
26
54
产品部
5
用户5
user5@example.com
63
37
市场部

数据总数: 10000 条

自动均分布局表格 (未设置列宽)

ID
姓名
年龄
地址
邮箱
1
张三
20
北京市朝阳区
zhangsan@example.com
2
李四
25
上海市浦东新区
lisi@example.com
3
王五
30
广州市天河区
wangwu@example.com
4
赵六
35
深圳市南山区
zhaoliu@example.com
5
钱七
28
杭州市西湖区
qianqi@example.com

此表格的列未设置宽度，会自动均分剩余空间