UI组件前端【免费下载链接】varletA Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.项目地址https://gitcode.com/gh_mirrors/va/varlet点击查看免费下载本文围绕 varlet基于 Material Design 2/3 的 Vue 3 组件库中的表格组件var-table展开。它定位为一个极简的表格当你需要以表格形式展示数据时可以使用它。读完本文你将掌握plain、bordered、surfacelow等多种表格形态的写法footer插槽搭配var-pagination实现分页的完整示例scroller-height配合position: sticky实现固定表头与纵向局部滚动的原理以及组件全部的属性、插槽、样式变量和基于StyleProvider的样式定制方式。组件结构与源码走读在开始写代码之前先理解var-table的 DOM 结构有助于后面理解固定表头为什么能 work。查看 Table.vue 的模板部分组件整体是三层结构div :class... !-- 外层容器承载 elevation、plain、bordered 等修饰类 -- div :classn(main) !-- .var-table__main滚动容器max-height 由 scroller-height 控制 -- :style{ max-height: toSizeUnit(scrollerHeight) } table :classn(table) :style{ width: toSizeUnit(fullWidth) } slot / !-- 默认插槽放置 thead/tbody -- /table /div div v-if$slots.footer :classn(footer) slot namefooter / !-- footer 插槽无内容时不渲染 -- /div /div从源码结构看有几个关键点滚动发生在__main容器上table.less 中.var-table__main设置了overflow: auto而table元素本身min-width: 100%。因此横向列数过多、或纵向设置scroller-height时滚动条都出现在该容器内这也是固定表头方案的基础。elevation 类受plain控制模板中类名逻辑为[!plain, formatElevation(elevation, 1)]。formatElevation 在elevation false时返回null无阴影在elevation true且提供了默认等级时取默认值。Table 传入的默认等级是1所以默认渲染出var-elevation--1设置plain后该 elevation 类被整体去掉。尺寸属性统一走toSizeUnittoSizeUnit 的规则是数字自动补px字符串原样透传。因此full-width和scroller-height既可以传数字如400等价于400px也可以传带单位的字符串如400px、50%。footer 按需渲染v-if$slots.footer保证没有传footer插槽时不产生多余的 DOM 节点这一点在 index.spec.js 中should not render footer without footer slot用例里有明确断言。基本使用最简单的使用方式直接用原生thead/tbody结构填充默认插槽不需要任何数据绑定配置。template var-table thead tr th姓名/th th数学/th th英语/th /tr /thead tbody tr td耗子君/td td124/td td38/td /tr tr td火猫桑/td td100/td td135/td /tr /tbody /var-table /template该示例与仓库中的 示例文件 基本使用一节完全一致。渲染效果是一张带白色背景、圆角--table-border-radius: 2px、默认 1 级 elevation 阴影的卡片式表格行高46px单元格内边距8px 16px行悬停有浅灰背景过渡transition: background-color 0.25s。纯表格plain 属性设置plain可以一并去掉卡片阴影、背景色和圆角template var-table plain thead tr th姓名/th th数学/th th英语/th /tr /thead tbody tr td耗子君/td td124/td td38/td /tr tr td火猫桑/td td100/td td135/td /tr /tbody /var-table /template源码层面plain通过.var-table--plain修饰类完成三件事见 table.less--plain { --table-background: transparent; // 去掉背景色 --table-tbody-tr-hover-background: var(--table-plain-row-hover-background); // 悬停色改为低透明度的 on-surface 叠加 border-radius: 0; // 去掉圆角 }同时模板中的[!plain, formatElevation(elevation, 1)]会移除 elevation 阴影类所以卡片感被彻底剥离。测试用例 index.spec.js 断言了plain: true时类列表包含var-table--plain且不包含var-elevation--1印证了上述行为。Plain Bordered更纯粹的表格形态同时使用plain和bordered可以用外边框展示更纯粹的表格形态template var-table plain bordered thead tr th姓名/th th数学/th th英语/th /tr /thead tbody tr td耗子君/td td124/td td38/td /tr tr td火猫桑/td td100/td td135/td /tr /tbody /var-table /template样式上有两处细节值得注意.var-table--bordered只加一条外边框border: var(--table-border)其中--table-border默认值为thin solid var(--color-outline)单独使用plain时border-radius被置0但.var-table--plain--bordered规则会把圆角恢复为var(--table-border-radius)默认2px即纯 边框形态仍保留轻微圆角。测试中 table plain bordered 用例同时断言了两个修饰类共存行为与文档一致。弱背景色surfacelow通过surfacelow使用更接近 MD3Material Design 3的弱背景层级template var-table surfacelow thead tr th姓名/th th数学/th th英语/th /tr /thead tbody tr td耗子君/td td124/td td38/td /tr tr td火猫桑/td td100/td td135/td /tr /tbody /var-table /template实现上surfacelow会加上.var-table--surface-low类Table.vue 中surfaceLow computed(() props.surface low)该修饰类通过覆盖局部 CSS 变量生效而不是重写具体选择器--surface-low { --table-background: var(--table-surface-low-background); --table-tbody-tr-hover-background: var(--table-surface-low-row-hover-background); }而--table-surface-low-background的默认值是var(--color-surface-container-highest)即直接引用 varlet 的全局色板变量MD3 的 surface container 层级。因此当项目切换主题色时弱背景会随之联动。从 props.ts 可见surface目前类型上只接受low一个取值TableSurface low。尾部插槽搭配分页组件可以在footer插槽中插入一些东西最常见的是插入分页组件。下面是一个完整可运行的示例数据按需生成翻页时重新拉取当前页数据script setup import { ref } from vue const list ref(gen(1, 10)) function gen(current, size) { return Array.from({ length: size }).map((_, index) { const id (current - 1) * size index 1 return { name: Name ${id}, math: id, english: id, } }) } function get(current, size) { list.value gen(current, size) } /script template var-table thead tr th姓名/th th数学/th th英语/th /tr /thead tbody tr v-forl in list :keyl.name td{{ l.name }}/td td{{ l.math }}/td td{{ l.english }}/td /tr /tbody template #footer div classtable-example-footer var-pagination :simplefalse :current1 :total100 :size-option[5, 10] changeget / /div /template /var-table /template style .table-example-footer { display: flex; justify-content: flex-end; align-items: center; height: 60px; padding: 0 16px; } /style关于 footer 区域的布局约束table.less 中.var-table__footer定义了__footer { width: 100%; min-height: var(--table-row-height); // 最小高度与行高一致默认 46px border-top: var(--table-footer-border-top); background: var(--table-background); }即 footer 自带与表格背景一致的背景色和一条顶部分隔线内部如何排布如上面示例的flex右对齐由使用者自己控制。由于 footer 位于__main滚动容器之外它始终固定在表格底部不随表体滚动——这与固定表头形成上下呼应的常见组合。固定表头scroller-height sticky长表格 分页 固定表头是文档给出的进阶组合。核心是两步给var-table设置scroller-height400px让__main滚动容器获得最大高度纵向滚动被限制在表格内部给thead加内联样式position: sticky; top: 0让表头在容器内滚动时保持吸顶。script setup import { ref } from vue const list ref(gen(1, 10)) function gen(current, size) { return Array.from({ length: size }).map((_, index) { const id (current - 1) * size index 1 return { name: Name ${id}, math: id, english: id, } }) } function get(current, size) { list.value gen(current, size) } /script template var-table scroller-height400px thead styleposition: sticky; top: 0 tr th姓名/th th数学/th th英语/th /tr /thead tbody tr v-forl in list :keyl.name td{{ l.name }}/td td{{ l.math }}/td td{{ l.english }}/td /tr /tbody template #footer div classtable-example-footer var-pagination :simplefalse :current1 :total100 :size-option[5, 10] changeget / /div /template /var-table /template style .table-example-footer { display: flex; justify-content: flex-end; align-items: center; height: 60px; padding: 0 16px; } /style从源码结构看这个方案能成立有三层原因滚动容器是.var-table__mainoverflow: autosticky元素thead相对于最近的滚动祖元素定位top: 0即吸附在该容器顶部样式里thead tr有background: var(--table-background)不透明背景吸顶时表头能完全遮挡下方滚过的表体行不会出现透底scroller-height支持数字和字符串两种写法。测试用例分别验证了scrollerHeight: 300px和scrollerHeight: 300经toSizeUnit转为300px最终都落在.var-table__main的max-height内联样式上。另外 table.less 中.var-table通过--scrollbar-track-background: var(--table-background)配合 styles/common.less 的通用滚动条样式把滚动条轨道背景与表格背景色统一视觉上更干净。API 参考属性参数说明类型默认值full-widthtable的宽度包含可滚动部分string \| number100%elevation海拔高度可选值为truefalse和0-24的等级string \| number \| booleantrueplain是否以纯表格形态渲染不带卡片阴影、背景色和圆角booleanfalsebordered是否显示外边框booleanfalsesurface弱背景色风格low-scroller-height3.2.0滚动容器高度可用于实现纵向局部滚动固定表头等功能string \| number-几个结合源码可以补充的细节elevationtrue表示默认的 1 级阴影var-elevation--1由formatElevation(elevation, 1)的默认等级决定false完全关闭阴影0-24的数字/字符串对应 MD 的 elevation 等级如3渲染为var-elevation--3。测试用例 table elevation 验证了true与3两种取值的类名输出。full-width最终作用在内部table元素的width内联样式上数字自动补px。测试用例 table full-Width 断言默认输出width: 100%;、传200后输出width: 200px;。scroller-height自3.2.0版本引入缺省时__main无max-height限制表格随内容自然撑开。TypeScript 类型定义见 types/table.d.tsTableProps接口与上表一一对应。插槽名称说明参数defaultTable 的内容-footerTable 尾部内容-default插槽承载thead/tbody等标准表格内容渲染在__main滚动容器内footer插槽位于滚动容器之外未提供时不渲染 DOM。两个插槽的行为均有对应测试断言table default slot、table footer slot、table default and footer slots。样式变量以下为组件使用的 CSS 变量可以使用 StyleProvider 组件style-provider 组件源码进行样式定制变量名默认值--table-background#fff--table-surface-low-backgroundvar(--color-surface-container-highest)--table-surface-low-row-hover-backgroundvar(--color-surface-container-highest)--table-plain-row-hover-backgroundhsla(var(--hsl-on-surface), 0.04)--table-border-radius2px--table-borderthin solid var(--color-outline)--table-thead-border-bottomthin solid var(--color-outline)--table-thead-th-text-colorrgba(0, 0, 0, 0.6)--table-thead-th-text-alignleft--table-thead-th-font-size14px--table-thead-th-font-weight500--table-thead-tr-border-bottomthin solid var(--color-outline)--table-tbody-tr-hover-background#f5f5f5--table-tbody-tr-border-bottomthin solid var(--color-outline)--table-tbody-td-text-color#555--table-tbody-td-font-size14px--table-tbody-td-text-alignleft--table-row-height46px--table-row-padding8px 16px--table-footer-border-topthin solid var(--color-outline)这些默认值声明在 table.less 顶部的:root块中与文档表格逐项一致。由于plain、surfacelow等形态本质上只是覆盖--table-background、--table-tbody-tr-hover-background等少数变量因此通过StyleProvider覆盖变量时三种形态会共享同一套定制结果这是变量驱动样式设计带来的好处改一个变量表头、表体、悬停、footer 分隔线统一联动。全局默认值与按需引入components 入口 index.ts 除了标准的withInstall(Table)注册逻辑外还调用了withPropsDefaultsSetter(Table, tableProps)并导出tableProps这意味着你可以像其他 varlet 组件一样通过Table.setPropsDefaults在整个应用范围内覆盖 Table 的默认属性例如全局关闭阴影。TypeScript 侧的Table类同样声明了static setPropsDefaults: SetPropsDefaultsTableProps见 types/table.d.ts。小结var-table的设计思路是极简容器 原生表格语义 CSS 变量定制组件本身只负责滚动容器、elevation 卡片、形态修饰类和 footer 区域thead/tbody的具体内容完全交给使用者用标准 HTML 表格标签书写。配合plain/bordered/surfacelow三种形态开关、scroller-height局部滚动与sticky表头以及StyleProvider对 21 个 CSS 变量的覆写能力它覆盖了数据展示场景从轻量清单到带分页、固定表头的长表格的典型需求。赞分享UI组件前端【免费下载链接】varletA Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.项目地址https://gitcode.com/gh_mirrors/va/varlet点击查看免费下载相关推荐rsuite Table 固定表格Sticky Table完全指南将表头与横向滚动条固定在页面指定位置rsuite Table 固定表格Sticky Table完全指南将表头与横向滚动条固定在页面指定位置 本篇技术指南围绕 rsuite rsuite t前端UI组件react-virtualized Table 组件完全指南固定表头与虚拟化行渲染的高性能表格方案react virtualized Table 组件完全指南固定表头与虚拟化行渲染的高性能表格方案 导读 本文围绕 react virtualized 的 T前端UI组件高效实现表格固定列Bootstrap Table扩展完全指南高效实现表格固定列Bootstrap Table扩展完全指南 在处理大量数据表格时保持关键信息的可见性是提升用户体验的关键。bootstrap table创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考