antd 复杂table的实现

最新推荐文章于 2024-04-28 13:46:58 发布
最新推荐文章于 2024-04-28 13:46:58 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： 布局 文章标签： antd 前端 样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39458856/article/details/98041116
版权

antd官方的方法：

  <ColumnGroup title="Name">
      <Column title="First Name" dataIndex="firstName" key="firstName" />
      <Column title="Last Name" dataIndex="lastName" key="lastName" />
    </ColumnGroup>

其他方法：

bohn
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
antd Design Table二次封装
04-26
阿里出品的Ant Design UI组件用起来可以说是很顺手的，但是用多了会发现有时候还能更高效一点，那么我就萌生了对个别组件惊醒二次封装的念头，接下来我就介绍下我二次封装的表格组件，事先说明：以下组件是基于antdV3版本的 没积分的可以去git上下载：https://gitee.com/jsicu/react-antdTable-secondEncapsulation
qt布局中listwidget 保持固定宽度_Antd Table布局指南
weixin_39650756的博客
11-25 679
在使用Antd Table组件展示表格时，我经常会遇到一些疑惑的问题，比如面对设计稿该如何设置某一列的宽度，有哪些是不需要设置宽度的，当前列字段是否需要设置不换行处理，有固定列时该如何设置scroll属性值。总会觉得设计与实现会产生矛盾冲突，从前端角度来看，其实也暴露了我对table了解不够深入，导致无法准确预测table在不同属性相互作用后对布局的影响。因此本文会对我近期table布局的学习与思...
table表格基础知识及简单运用
n17742637334的博客
03-31 133
在HTML中我们用< table >标签来定义表格，它和Excel表格类似，都包括行、列、单元格、表头等，但是在功能方面HTML的表格远不如Excel强大。
antd vue table组件实现合计栏（使用summary无效）曲线救国！！！
qq_44162778的博客
01-04 1248
【代码】antd vue table组件实现合计栏（使用summary无效）曲线救国！！！
react项目中，在tab列表上展示某个字段以 数组形式 展示
lzfengquan的博客
08-30 1091
在做中燃的项目时，遇到了一个需求，就是想要在展示的列表上，把发票展示成多个号码，在一个列里展示。对前端来说用 map，就可以了，需要后台配合，返回一个数组的形式 实例代码1 先看看 ant.design官网里的。 假设后端返回的是data import { Table, Tag, Space } from 'antd'; const { Column, ColumnGroup } = Table; const data = [ { key: '1', firstName: 'Joh
关于antd中table表格排序以及筛选问题汇总
bossweiga的博客
06-18 1172
因为需要去监听col中sorter,图标跟筛选图标高亮以及变灰的问题,这里需要去监听对应的属性值的变化之后，在变化的基础上去重新设置colum的值，因为需要去点击筛选项去生成选项，这里需要封装子组件去实现，在子组件中的useEffect中去在渲染时执行一次，然后。功能目前还有问题，使用setState目前导致没法及时更新col,后续会继续更新。然后随便写点data数据。
关于antd表格头合并
qq_36939013的博客
03-11 1065
<a-table :rowKey="record => record.key" :pagination="{ pageSize: 10 }" :dataSource="tableData" bordered > <a-table-column data-index="region"> ...
蚂蚁金服-antd-Table（2）
tianxia1202的博客
01-07 1160
import React,{ Component} from 'react'; import { Table, Icon, Divider } from 'antd'; const { Column,ColumnGroup } = Table; const dataSource = [{ key: 1, firstName: '小小', lastName: '天下',
Vue 3 中 Ant Design Vue 如何自定义表格 Table 的表头（列头）内容？
qq_40868156的博客
11-23 8963
Vue3，Ant Design Vue 组件，Table 组件，表格组件，自定义表头，自定义列头，自定义单元格
vue+antd——table组件实现动态列+表头下拉选择功能——技能提升
yehaocheng520的博客
09-06 4108
vue+antd——table组件实现动态列+表头下拉选择功能——技能提升
antd table动态表头_react动态配置antd table的columns
weixin_42128141的博客
02-15 4745
constructor(props) {super(props)this.state = {fieldDdata: data,//操作动态columns的配置columns: [],tableDate: [],}}columns={this.state.columns}dataSource={this.state.tableDate}/>onClick={event => {event...
antd-data-table：组合antd的Table和Form来执行数据的搜索，显示和操作工作的组件
02-03
antd数据表 一个组合了antd的Table和Form来进行数据的搜索，显示和操作的组件。特征摆脱： 处理分页处理表格行选择编写搜索字段表单项组件编写行动作组件只需关注： 进行数据获取请求并返回数据如有必要，呈现特定的...
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
antd-table-saveas-excel:蚂蚁表到Excel
05-17
简介二次封装better-xlsx，基于Antd Table的表格导出插件安装$ npm install antd-table-saveas-excel
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 226
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 512
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 973
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 172
两个前端标签
react中antd的table实现数据滚动，鼠标悬浮时停止滚动
05-26
在Antd的Table组件中，可以使用fixed属性来实现数据滚动。具体实现方法如下： 1. 首先，在Table的columns属性中设置width属性，保证表格总宽度大于外层容器的宽度，这样表格就可以出现横向滚动条。 2. 然后，在Table的scroll属性中设置x属性，指定表格横向滚动的范围。 3. 最后，在Table的scroll属性中设置onScroll属性，当表格滚动时，调用一个函数来实现滚动的暂停和继续。在该函数中，通过判断鼠标是否悬浮在表格上，来决定是否暂停滚动。 代码示例： ```jsx import React, { useState, useRef } from 'react'; import { Table } from 'antd'; const columns = [ { title: '姓名', dataIndex: 'name', width: 200 }, { title: '年龄', dataIndex: 'age', width: 200 }, { title: '地址', dataIndex: 'address', width: 400 }, ]; const data = []; for (let i = 0; i < 50; i++) { data.push({ key: i, name: `Edward King ${i}`, age: 32, address: `London, Park Lane no. ${i}`, }); } const ScrollTable = () => { const [isScrolling, setIsScrolling] = useState(true); const tableRef = useRef(null); const handleScroll = () => { if (!tableRef.current) return; const table = tableRef.current.querySelector('.ant-table-body'); if (!table) return; if (isScrolling && table.scrollLeft !== 0) { setIsScrolling(false); } else if (!isScrolling && table.scrollLeft === 0) { setIsScrolling(true); } }; const handleMouseEnter = () => { setIsScrolling(false); }; const handleMouseLeave = () => { setIsScrolling(true); }; return ( <div style={{ width: 800, height: 400, overflow: 'hidden' }}> <Table columns={columns} dataSource={data} pagination={false} scroll={{ x: 800 }} ref={tableRef} onScroll={handleScroll} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} style={{ width: 1000 }} bordered size="small" rowKey={(record) => record.key} sticky /> </div> ); }; export default ScrollTable; ``` 在上面的代码中，我们通过ref获取到了Table组件的DOM节点，然后在handleScroll方法中判断表格是否滚动，根据isScrolling状态来判断是否暂停滚动。同时，我们还通过onMouseEnter和onMouseLeave事件来监听鼠标是否悬浮在表格上，以此来控制滚动的暂停和继续。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值