Table 表格
提供灵活的数据渲染能力,支持基础表格、内容省略处理、自定义列渲染、展开行等多种形式。 相较于传统 UI 框架,配置更简洁,插槽更灵活。
常用的表格渲染,可拓展,优势:相较于Element Plus 不需要在写繁琐杂乱的slot插槽来渲染。
auto-fit:自适应宽度, width:固定宽度
table 默认会根据 columns 中的 width 来计算自适应宽度, 如果 width 设置了固定宽度, 除设置了 width 的列不会自适应, 其他列会自适应。
table 设置了 auto-fit: false, 则会根据 columns 中的 width 来计算默认最小宽度, 保证内容在 maxWidth 内不会被截断。
大数据场景建议启用 virtualScroll,并配合 fixedHeader + maxHeight + singleLine 使用。
基础用法
最基本的数据渲染,使用 columns 和 dataSource 完成表格结构渲染。
固定表头
通过 fixedHeader + maxHeight 开启表体区域滚动,表头保持固定。
固定宽度 + 宽度自适应
cloumns 中配置 width 为固定宽度, 默认为自适应宽度
sec-abc123xyz82abc123xyz82881881
多行文本展示展示
支持多行文本内容的展示,适用于字段内容较长的场景。内容会自动换行显示,保证表格布局的整洁性和可读性。
Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park
自动省略展示
使用 showOverflowTooltip 属性,当单元格内容超出列宽时,自动显示省略号,并在悬浮时展示完整内容。 适用于无需自定义内容的列,配置简单高效。
Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park
自定义内容 + 悬浮展示
通过 slot 接管列渲染,并手动使用 tooltip 组件展示完整信息。适用于内容结构复杂、需定制格式的场景。
32 -- 我接管了这里的内容来超出悬浮展示,你看不到我,你看不到我,你看不到我, 这是一个很长的文案来保证超出悬浮效果展示
42 -- 我接管了这里的内容来超出悬浮展示,你看不到我,你看不到我,你看不到我, 这是一个很长的文案来保证超出悬浮效果展示
32 -- 我接管了这里的内容来超出悬浮展示,你看不到我,你看不到我,你看不到我, 这是一个很长的文案来保证超出悬浮效果展示
注意:使用 slot 自定义渲染内容时,请确保自行处理 overflow 样式,避免内容溢出遮挡其他列。
展开行(expand)
使用特殊 key 为 expand 的列配置项,即可开启每行的展开功能。也可以通过 slot 渲染自定义的展开内容,并使用 closeExpand() 在点击后主动关闭弹层。
默认 expandList(点击项后自动关闭)
Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park
自定义 expand 插槽(手动调用 closeExpand)
Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park
边框效果
通过设置 border 属性控制表格边框样式。支持 boolean / string / null,默认为 false。 可选值如 true、false,用于满足不同的表格样式需求。
序号列
设置列 key 为 index 可启用序号列,快速展示当前行的序号。可与 render 配合自定义显示内容。
多选列 + 禁用条件
设置列 key 为 selection 可启用多选功能,配合 disabled 函数可控制某些行无法选择。 常用于状态为“已处理”等不允许用户修改的场景。
动态渲染计算宽度
支持根据 dataSource 的数据变化自动动态计算表格宽度。
表格数据为空时展示空缺效果
根据 responsive 动态响应表格数据的变化,并展示空缺效果。
函数渲染列
使用 render 函数可自定义列内容渲染方式,适用于不依赖插槽、需动态生成结构的场景。