首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Ant Design -如何用滚动主体(y-scroll)固定底部的表汇总行

Ant Design 是一套基于 React 的企业级 UI 组件库,它提供了丰富的组件和样式,可以帮助开发者快速构建美观、易用的前端界面。

要实现滚动主体固定底部的表汇总行,可以使用 Ant Design 提供的 Table 组件和一些 CSS 样式来实现。

首先,需要将表格的主体部分设置为可滚动的,可以通过设置 Table 组件的 scroll 属性来实现,将 y 属性设置为一个具体的高度值,例如 '400px'。这样就可以使表格的主体部分出现滚动条。

接下来,需要在表格的底部添加一个表汇总行。可以通过在 Table 组件中使用 summary 属性来实现。summary 属性接受一个函数作为参数,该函数返回一个 React 组件,用于渲染表汇总行的内容。

在这个函数中,可以根据表格的数据进行计算,得出需要展示的汇总信息。然后将这些信息渲染到表汇总行中。

最后,为了使表汇总行固定在底部,可以使用 CSS 样式来设置表格的布局。可以为表格的容器元素设置一个固定高度,并将其 position 属性设置为 relative。然后为表格的主体部分设置一个固定高度,并将其 position 属性设置为 absolute,同时设置 bottom 属性为 0。这样就可以将表格的主体部分固定在底部。

总结一下,实现滚动主体固定底部的表汇总行的步骤如下:

  1. 使用 Ant Design 的 Table 组件,并设置 scroll 属性为一个具体的高度值,使表格的主体部分可滚动。
  2. 使用 summary 属性,在表格中添加一个表汇总行,并根据表格的数据计算汇总信息。
  3. 使用 CSS 样式,将表格的主体部分固定在底部。

关于 Ant Design 的更多信息和使用方法,可以参考腾讯云的 Ant Design 产品介绍页面:Ant Design 产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue,React,微信小程序,快应用,TS 和 Koa 一把梭

+iconfont react-router-v4:路由4.x版本 redux:状态管理 ant-design-mobile:UI组件 iconfont:字体icon 3.1.3适配方案 rem适配 3.1.4...地址,欢迎 star 3.2.2技术栈 dva+umi+ant-design-pro dva:可拔插react应用框架,基于react和redux mui:集成reactrouter和redux...ant-design-pro:基于react和ant-pc中后台解决方案 3.2.3适配方案 左侧固定宽度,右侧自适应 右侧导航分别配置滚动条.控制整个page 3.2.4技能点分析 技能点 对应api...本文从后台利用node框架koa+mongodb实现数据增删改查和注册接口,前端利用umi + dva +ant-design-pro来实现数据渲染。...Context,通过ctx访问暴露方法 ctx方法 request:请求主体;response:响应主体;ctx.cookies.get:获取cookie;ctx.throw:抛出异常 request

3.1K20
  • Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

    所以Toolbar上部边缘是不可以往下拉,只有下部边缘才能往下拉,这样视觉效果好比Toolbar电影幕布一般缓缓向下展开。...声明工具栏滚动行为标志; 其实真正运行时候,Toolbar高度是固定不变,变化高度是CollapsingToolbarLayout。...如果仅仅声明scroll,没有声明其它标志,则滚动效果如下图所示: ? 2、enterAlways : 头部与主体先一起滚动,头部滚到位后,主体继续向上或者向下滚。...具体滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠最小高度。然后头部固定不动,主体继续向上滚动。 向下滚动:头部固定不动,主体先向下滚动,一直滚到主体全部拉出。然后头部向下展开。...具体滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠最小高度。然后头部与主体先一起滚动,头部滚到位后,主体继续向上。 向下滚动:头部与主体先一起滚动,一直滚到头部折叠最小高度。

    3.3K30

    Android开发笔记(一百三十五)应用栏布局AppBarLayout

    可是仅仅使用Toolbar的话,还是有些呆板,比如说Toolbar固定占据着页面顶端,既不能跟着主体页面移上去,也不会跟着主体页面拉下来。...NestedScrollView继承自FrameLayout,其用法与ScrollView相似,都必须且只能带一个直接子视图,都是允许视图上下滚动等等。...1、AppBarLayout滚动依赖于主体视图滚动,与主体视图相对应,可将AppBarLayout称作头部视图。既然一个页面分为头部和主体两部分,那么就存在谁先滚谁后滚问题了。...然后头部固定不动,主体继续向上滚动。 向下滚动:头部固定不动,主体先向下滚动,一直滚到主体全部拉出。然后头部向下展开。...具体滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠最小高度。然后头部与主体先一起滚动,头部滚到位后,主体继续向上。 向下滚动:头部与主体先一起滚动,一直滚到头部折叠最小高度。

    2K40

    React 项目精进技巧

    1、工程化实践 umi+dva作为底层框架,Ant Design Mobile为 UI 组件库,是蚂蚁金服推崇react项目最佳实践,具有国际化、权限、数据流、配置式路由、补丁方案、自动化 external...方面等等方便一线开发者功能,部分功能代码可以参考Ant Design pro,目录结构预览如下 2、通用组件 ErrorBoundary 部分 UI JavaScript 错误不应该导致整个应用崩溃...,data-src * 3,停止监听当前节点 * @param {*} ele 监听img元素类名, .imgBox * @param {*} callback * @param {*}...watch 监听变化数据,data变化后触发此hook逻辑 */ let observer; export default function useImgHook(ele, callback,...hook 滚动底部再加载数据 import { useEffect } from 'react'; let observer; export default function useObserverHook

    99810

    Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

    自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中组件(顺便学学英语),以便今后在使用时候完全不虚...导航抽屉可以从屏幕左侧出现 (1),或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5% ?...行为 滚动 Navigation drawers 可以垂直滚动,独立于屏幕内容和 UI 其余部分。...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部而不是左侧或右侧边缘 modal drawers。...调整 bottom navigation drawer 打开位置,以便在屏幕底部剪切最后一个视图中列表项。 这可以通知用户有更多项目要查看。

    3.8K40

    B端产品设计规范

    在设计规范指导下,开发部门在搭建全局共用控件时,产品设计规则就会更加清晰明了,:产品设计中按钮、间距、字体大小、颜色、列表等元素设计明确。...: 头部区域header 、主体区域main、底部区域footer。...列数太多:默认展示范围:3-8列,若出现更多,可固定重要列,剩余列滚动条展示交互设计。 列表宽度:宽度自适应,但根据字段重要性显示,重要字段优先完整显示。...滚动条:表格内容超过一屏需要显示竖向滚动条时,需要固定表头。只需滚动表格内容就好。如下图所示。 空数据:表格某部分无数据时用 “-” 来填充显示,对于数据为零单元格,填上 0 即可。...参考文献如下: 1、ZAN-DESIGN 有赞网站 2 《CCtalk B端产品设计课》by 美芳老师 3、ANT-DESIGN 蚂蚁金服等网站 4、阿里系数据可视化设计网站 最后分享一个小故事,

    4.3K45

    100个弹框设计小结

    弹框一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。其好处是让用户更聚焦,且不用离开当前页面,更快更容易完成任务。...高度的话,以Windows为例,去掉系统底部功能条高度及浏览器高度后,可以得出: 768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px 弹框高度控制在...可以想像将会有一大波移动上体验会搬到网页设计上,弹框中包含多个层级,透过左上角返回交互体验,更灵动及细腻动画效果等。...视觉表现方面,之前也提到过,将会有更多产品会为了在大屏幕下有更好视觉效果做出针对性设计。而随著产品愈来愈追求简洁,UI也变得愈来愈轻盈,甚至透明。弹框也许不再需要用一个框框去包住主体。...Squarespace登录弹框 Evernote修改标签弹框 扩展阅读 5 essential ux rules for dialog design http://babich.biz/5-essential-ux-rules-for-dialog-design

    1.8K30

    作为前端程序员:你必须知道常用英语词汇!!全是干货!!!

    背景 border 边框 banner 页面上一个横条 both 二者都是clear 属性一个属性值 black 黑色 bottom 底部,是一个CSS 属性 blink 闪烁 box 盒子 block...中间,居中 connected 连接 contact 联系 child 孩子 content 内容 circle 圆圈 crosshair 十字叉丝 class 类别 css 层叠样式 clear...decimal 十进制 division 分区, decoration 装饰 document 文档 default 默认 definition 定义 dotted 点线 double 双线 design...form 表单 footer 页脚 from…to 从…到 first 第一 focus 焦点 fadeIn 淡入 fadeOut 淡出 find 查找 fixed 固定 function函数,功能...提交 scroll 滚动 shadow 阴影 silver 银色 square 方块 solid 固体,实线 static 静态 solution 方案 strong 强壮,加粗 style 样式

    83340

    【软件开发规范七】《Android UI设计规范》

    ,6位(:#0470C4)就是RGB,值8位(:#1E000000)头两位是透明度,后6位是RGB值,00是完全透明,FF是完全不透明,比较适中透明度值是 1E。...底部动作条呈现了简单、清晰、无需额外解释一组操作。 ​编辑 ​编辑 通常以列表形式出现,支持上下滚动。 ​编辑 ​编辑 也可以是网格式。...编辑 菜单过长时,需要显示滚动条。 ​编辑 菜单从当前选项固定位置展开,不要跟随点击位置改变。 ​编辑 菜单到上下留出8dp距离。 ​...编辑 滚动时,如果列表较长,小标题会固定在顶部,直到下一个小标题将它顶上去。 ​编辑 存在浮动按钮时,小标题要让出位置,与文字对齐。 ​...手机端侧边抽屉距离屏幕右侧56dp。 ​编辑 侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定底部。抽屉收起时,会保留之前滚动位置。 ​

    5.1K20

    测试需求平台13-Table组件应用产品列表优化

    ✍ 此系列为整理分享已完结入门搭建《TPM提测平台》系列迭代版,拥抱Vue3.0将前端框架替换成字节最新开源arco.design,其中约60%重构和20%新增内容,定位为从 0-1手把手实现简单测试平台开发教程...正式开始前,帮朋友做一个小测试,插播一个职场小调查,希望了解下大家在职场里求职考量。点击下方小程序或底部阅读原文均可参与填写,多谢!...单元格 :表格主体由多个单元格组成,单元格内支持文字、图标、按钮、标签、单选框、复选框等元素。 行列分割线:从视觉上分隔信息。...由表头和单元格组成,无其他拓展操作,对数据进行最基础展示; 固定表格 用于在固定表格重要行或列(一般为头和两边列)内容展示不全场景,出现滚动条可滑动预览; 选择表格 表格可以配置行CheckBox,...https://arco.design/vue/component/table#API Props 属性 columns:表格列定义 - TableColumnData[] 类型

    21510

    8则未必知道且超级实用纯CSS布局排版技巧 | 网易4年实践

    全屏布局 经典「全屏布局」由顶部、底部主体三部分组成,其特点为三部分左右满屏拉伸、顶部底部高度固定主体高度自适应。该布局很常见,也是大部分Web应用主体主流布局。...top:0和bottom:0将其吸顶和吸底,并声明俩高度为固定值;将主体top和bottom分别声明为顶部高度和底部高度。...display:flex默认会令子节点横向排列,需声明flex-direction:column改变子节点排列方向为纵向排列;顶部和底部高度固定,所以主体需声明flex:1让高度自适应。...细心同学可能发现这些节点在某些滚动时刻处于相对定位,在特定滚动时刻处于固定定位。...bottom为40px,滚动到距离容器底部40px就固定 第5个:bottom为0px,滚动到容器底部固定 当然,换成left或right也一样能实现横向吸附效果。

    3.3K20

    关于ant design pro权限方案设计

    制访问控制下,用户(或其他主体)与文件(或其他客体)都被标记了固定安全属性(安全级、访问权限等),在每次访问发生时,系统检测安全属性以便确定一个用户是否有权访问该文件。...属性包括请求主体属性、请求客体属性、请求上下文属性、操作属性等。身为班主任(主体属性)老张在上课(上下文属性)时可以踢(操作属性)身为普通学生(客体属性)小明一脚。...对于我们前端开发者而言,我们需要其实就是 得到用户一个角色权限 使用得到权限进行比较,对结果进行不同处理 那我们来看看ant design pro 权限方案是如何处理。...ant design pro 中权限方案 业界比较通用ant design pro中权限方案是如何设计呢? 获取用户角色权限 一开始在进入页面的同时,会进行登陆校验。...新权限方案 在新方案中,业务包只保留权限公共方法,把页面权限判断逻辑进行下放,子产品自己维护自己权限判断逻辑,修改一条权限逻辑也非常容易, ​ 相比起 ant design pro 中通过角色进行判断

    1.3K21

    Flink SQL 知其所以然(二十六):万字详述 Flink SQL 4 种时间窗口语义!(收藏)

    滚动窗口具有固定大小,且不重叠。例如,指定一个大小为 5 分钟滚动窗口。在这种情况下,Flink 将每隔 5 分钟开启一个新窗口,其中每一条数都会划分到唯一一个 5 分钟窗口中,如下图所示。...注意: 事件时间中滚动窗口窗口计算触发是由 Watermark 推动。 2.滑动窗口(HOP) ⭐ 滑动窗口定义:滑动窗口也是将元素指定给固定长度窗口。与滚动窗口功能一样,也有窗口大小概念。...3.Session 窗口(SESSION) ⭐ Session 窗口定义:Session 时间窗口和滚动、滑动窗口不一样,其没有固定持续时间,如果在定义间隔期(Session Gap)内没有新数据出现...4.渐进式窗口(CUMULATE) ⭐ 渐进式窗口定义(1.13 只支持 Streaming 任务):渐进式窗口在其实就是 固定窗口间隔内提前触发滚动窗口,其实就是 Tumble Window +...如下图所示: cumulate window ⭐ 应用场景:周期内累计 PV,UV 指标(每天累计到当前这一分钟 PV,UV)。

    2.5K10

    关于ant design pro权限方案设计

    制访问控制下,用户(或其他主体)与文件(或其他客体)都被标记了固定安全属性(安全级、访问权限等),在每次访问发生时,系统检测安全属性以便确定一个用户是否有权访问该文件。...属性包括请求主体属性、请求客体属性、请求上下文属性、操作属性等。身为班主任(主体属性)老张在上课(上下文属性)时可以踢(操作属性)身为普通学生(客体属性)小明一脚。...对于我们前端开发者而言,我们需要其实就是 得到用户一个角色权限 使用得到权限进行比较,对结果进行不同处理 那我们来看看ant design pro 权限方案是如何处理。...ant design pro 中权限方案 业界比较通用ant design pro中权限方案是如何设计呢? 获取用户角色权限 一开始在进入页面的同时,会进行登陆校验。...新权限方案 在新方案中,业务包只保留权限公共方法,把页面权限判断逻辑进行下放,子产品自己维护自己权限判断逻辑,修改一条权限逻辑也非常容易, 相比起 ant design pro 中通过角色进行判断

    89420

    【前端转鸿蒙必看篇】:ArkUI布局

    组件内容和组件内容区不一定匹配,比如设置了固定width和height,此时组件内容大小就是设置width和height减去padding和border值,但文本内容则是通过文本布局引擎测算后得到大小...当组件内容和组件内容区大小不一致时,align 属性生效,定义组件内容在组件内容区对齐方式,居中对齐。...类似与前端一些浮层抽屉效果,我们通常使用 z-index 来控制它层级- https://ant-design.antgroup.com/components/drawer-cn- https:/.../ant-design-mobile.antgroup.com/zh/components/floating-panelStack({ alignContent: Alignment.BottomStart...列表(List)使用列表可以高效地显示结构化、可滚动信息。在ArkUI中,列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数布局能力,超出屏幕时可以滚动

    14920

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券