Table 表格
高性能企业级表格组件，融合 vxe-table、Element Plus、Naive UI、Ant Design 各家之长。支持虚拟滚动、树形数据、固定列/行、汇总行等高级功能。
基础表格
最基础的表格展示用法。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区建国路88号 |
2024-01-02 | 李四 | 上海市浦东新区陆家嘴金融中心 |
2024-01-03 | 王五 | 广州市天河区珠江新城 |
2024-01-04 | 赵六 | 深圳市南山区科技园 |
基础表格
带斑马纹表格
使用 stripe 属性。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区建国路88号 |
2024-01-02 | 李四 | 上海市浦东新区陆家嘴金融中心 |
2024-01-03 | 王五 | 广州市天河区珠江新城 |
2024-01-04 | 赵六 | 深圳市南山区科技园 |
带斑马纹表格
带边框表格
使用 border 属性。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区建国路88号 |
2024-01-02 | 李四 | 上海市浦东新区陆家嘴金融中心 |
2024-01-03 | 王五 | 广州市天河区珠江新城 |
2024-01-04 | 赵六 | 深圳市南山区科技园 |
带边框表格
带状态表格
通过 row-class-name 添加自定义类名。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区 |
2024-01-02 | 李四 | 上海市浦东新区 |
2024-01-03 | 王五 | 广州市天河区 |
2024-01-04 | 赵六 | 深圳市南山区 |
带状态表格
显示溢出工具提示
设置列的 showOverflowTooltip 属性。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区建国路88号SOHO现代城A座1001室，这是一个非常长的地址用于测试文本溢出效果 |
2024-01-02 | 李四 | 上海市浦东新区陆家嘴金融中心国际金融大厦28层，这里也是一个很长的地址 |
显示溢出工具提示
固定表头
设置 height 属性。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 办公地址路1号 |
2024-01-02 | 李四 | 办公地址路2号 |
2024-01-03 | 王五 | 办公地址路3号 |
2024-01-04 | 张三 | 办公地址路4号 |
2024-01-05 | 李四 | 办公地址路5号 |
2024-01-06 | 王五 | 办公地址路6号 |
2024-01-07 | 张三 | 办公地址路7号 |
2024-01-08 | 李四 | 办公地址路8号 |
2024-01-09 | 王五 | 办公地址路9号 |
2024-01-10 | 张三 | 办公地址路10号 |
2024-01-11 | 李四 | 办公地址路11号 |
2024-01-12 | 王五 | 办公地址路12号 |
2024-01-13 | 张三 | 办公地址路13号 |
2024-01-14 | 李四 | 办公地址路14号 |
2024-01-15 | 王五 | 办公地址路15号 |
2024-01-16 | 张三 | 办公地址路16号 |
2024-01-17 | 李四 | 办公地址路17号 |
2024-01-18 | 王五 | 办公地址路18号 |
2024-01-19 | 张三 | 办公地址路19号 |
2024-01-20 | 李四 | 办公地址路20号 |
固定表头
固定列
设置列的 fixed 属性。
日期 | 姓名 | 省份 | 城市 | 地址 | 邮编 |
|---|
2024-01-01 | 张三 | 北京 | 朝阳区 | 北京市朝阳区建国路88号 | 100000 |
2024-01-02 | 李四 | 上海 | 浦东新区 | 上海市浦东新区陆家嘴金融中心 | 200000 |
2024-01-03 | 王五 | 广东 | 天河区 | 广州市天河区珠江新城 | 510000 |
2024-01-04 | 赵六 | 广东 | 南山区 | 深圳市南山区科技园 | 518000 |
固定列
不同尺寸
提供 large、default、small。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区建国路88号 |
2024-01-02 | 李四 | 上海市浦东新区陆家嘴金融中心 |
2024-01-03 | 王五 | 广州市天河区珠江新城 |
2024-01-04 | 赵六 | 深圳市南山区科技园 |
不同尺寸
高亮当前行
使用 highlight-current-row 属性。
日期 | 姓名 | 地址 |
|---|
2024-01-01 | 张三 | 北京市朝阳区建国路88号 |
2024-01-02 | 李四 | 上海市浦东新区陆家嘴金融中心 |
2024-01-03 | 王五 | 广州市天河区珠江新城 |
2024-01-04 | 赵六 | 深圳市南山区科技园 |
当前选中行 ID: 未选择
高亮当前行
自定义索引
使用 show-index 显示序号列。
序号 | 日期 | 姓名 | 地址 |
|---|
| 10 | 2024-01-01 | 张三 | 北京市朝阳区建国路88号 |
| 20 | 2024-01-02 | 李四 | 上海市浦东新区陆家嘴金融中心 |
| 30 | 2024-01-03 | 王五 | 广州市天河区珠江新城 |
| 40 | 2024-01-04 | 赵六 | 深圳市南山区科技园 |
自定义索引