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

基于dataSource属性禁用行- antd表

antd表是一个基于React的UI组件库,用于构建用户界面。在antd表中,可以使用dataSource属性来传递数据源,以渲染表格的行。

禁用行是指在表格中某些行不可选中或不可操作。在antd表中,可以通过设置dataSource中的某些数据项的disabled属性来禁用特定的行。

禁用行的应用场景包括但不限于:

  1. 数据权限管理:根据用户的权限设置,禁用某些行,以防止用户对其进行操作。
  2. 数据状态管理:根据数据的状态,禁用某些行,以防止用户对其进行不合适的操作。
  3. 数据筛选:根据特定的条件,禁用某些行,以过滤掉不符合条件的数据。

在antd表中,可以使用以下方式禁用行:

  1. 设置dataSource中的disabled属性:
  2. 设置dataSource中的disabled属性:
  3. 使用rowSelection的getCheckboxProps方法:
  4. 使用rowSelection的getCheckboxProps方法:

推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供了高性能、可靠稳定的虚拟服务器。您可以根据自己的需求选择不同配置的云服务器,并根据实际使用情况进行弹性调整。腾讯云云服务器支持多种操作系统和应用环境,适用于各种场景的应用部署和开发需求。

产品介绍链接地址:腾讯云云服务器(CVM)

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

相关·内容

ExcelJS导出Ant Design Table数据为Excel文件

可以添加一或者同时添加多行数据,是使用最频繁的属性。... 支持一个只读字段,以指示基于 `OutlineLevel` 的折叠状态 expect(worksheet.getRow(4).collapsed).to.equal(false); expect(worksheet.getRow...解析 AntD Table 的 columns 和 dataSource : // 根据 antd 的 column 生成 exceljs 的 column const DEFAULT_COLUMN_WIDTH...通过 worksheet.addRows() 方法可以为工作添加多行数据,因为上面我们已经设置了表头,程序知道了每列数据应该匹配哪个字段,所以这里直接传入 Table 的 dataSource 即可。... = 1; 注意:调整行或列上的大纲级别或工作上的大纲级别将产生副作用,即还修改受属性更改影响的所有或列的折叠属性

5.3K30

ExcelJS导出Ant Design Table数据为Excel文件

可以添加一或者同时添加多行数据,是使用最频繁的属性。... 支持一个只读字段,以指示基于 `OutlineLevel` 的折叠状态 expect(worksheet.getRow(4).collapsed).to.equal(false); expect(worksheet.getRow...解析 AntD Table 的 columns 和 dataSource : // 根据 antd 的 column 生成 exceljs 的 column const DEFAULT_COLUMN_WIDTH...通过 worksheet.addRows() 方法可以为工作添加多行数据,因为上面我们已经设置了表头,程序知道了每列数据应该匹配哪个字段,所以这里直接传入 Table 的 dataSource 即可。... = 1; 注意:调整行或列上的大纲级别或工作上的大纲级别将产生副作用,即还修改受属性更改影响的所有或列的折叠属性

47130
  • 前端复杂表格导出excel,一键导出 Antd Table 看这篇就够了(附源码)

    如果项目中用到了 AntD,那就更简单了,因为 Table 本身已经设置好了 column 和 dataSource,只需解析 column 和 dataSource 即可快速导出 Excel。...可以添加一或者同时添加多行数据,是使用最频繁的属性。...解析 AntD Table 的 columns 和 dataSource 因为我们是用 AntD 的 Table,其实已经构造出了表头和具体的表格数据,所以只需解析即可。...通过 worksheet.addRows()方法可以为工作添加多行数据,因为上面我们已经设置了表头,程序知道了每列数据应该匹配哪个字段,所以这里直接传入 Table 的 dataSource 即可。...因为每一数据都是自己写入的,所以不管有几张都没有关系,我们关心的只有每一的数据。 同时我们做了和列合并算法,可以实现每一张的每一列都能定制宽度。

    11.4K20

    Vue3 + TS + Ant Design +Gin+Mysql实现表格数据持久化存储

    那我们这里来使用vite+vue+ts的方式实现前端显示数据库的信息,并能从前端更改后端数据库的信息。...3、后端api使用orm工具查询数据库中的数据 4、将查询结果返回给前端组件 5、前端设置返回的数据到 Table 的 dataSource,表格会自动渲染 通过这个过程涉及到前后端的交互,对于vue...+ts+antd以及ORM工具操作数据库的知识有一个更加深入的了解,也是全栈开发学习的必经之路。...'),后端接收并 DELETE 删除记录 - 修改:在表格添加编辑按钮,弹出编辑表格,axios.put('/updateRecord'),后端接收并 UPDATE 修改记录 7、 后端对应添加 /...定义结构模型:如Record 结构体 4. Gin 路由和接口:处理请求逻辑 5. GORM 数据库操作:CURD 记录 6. 启动 Gin 服务器 7.

    42520

    「前端组件化」以Antd为例,快速打通UI组件开发的任督二脉

    Grid 栅格栅格化布局,基于(row)和列(col)来定义信息区块,可以将区域24等分。通过 row 在水平方向建立一组 column,内容放置于 col 内。...展示层看col文件中这三代码,和各种style、className变量。不难发现,栅格化布局主要是通过组件参数对样式的控制来实现的。...style }} className={classes} ref={ref}> {children} );布局设计结合参数说明和代码分析,可以大致总结出栅格布局的设计如下:1.栅格组件基于...tbody中表格项的值,也是通过columns中列表项的dataIndex变量,从参数dataSource中找到对应的值。...组件Body会先循环渲染表格的行数据,每一下面包含一个BodyRow子组件BodyRow子组件,行数据会进行循环单元格数据,而单元格的内容封装在Cell子组件中。

    2.2K10

    前端: 如何让你的Table组件无限可能

    {dataSource} columns={columns} /> 这种业务场景虽然可以满足大部分后台管理系统的Table需求, 也可以使用 antd 或者 element 构建, 但是对于 lowcode...目前 antd4.0已经支持多列排序, 大家可以直接参考学习即可, 如下: ?...let draftArr = {} sheetNames.forEach(name => { let worksheet = workbook.Sheets[name]; // 只能通过工作名称来获取指定工作...笔者在之前的文章中介绍过 度量这个概念, 对于数据分析而言, 我们也要考虑可分析维度的概念, 比如什么是可分析的, 什么是不可分析的. 比如我们又一个表格, 里面有如下结构: ?...我们针对具有范围属性的维度进行度量, 生成度量数据, 代码如下: const generateDistData = (key:string, list:any) => { let distDataMap

    1.5K10

    低代码引擎实战-从零封装低代码组件

    上一篇文章讲了如何开始使用阿里低代码引擎 low-engine,以及如何在引擎 demo 中引用自定义组件,本篇将基于 vant 和 antd 封装一些低代码组件,带领大家熟悉自定义组件的封装和注意事项...由于时间关系,先只暴露 dataSource和 columns属性,通过columns属性,我们将学会如何使用 ArraySetter动态设置数组。...通过 dataSource属性,我们将学会使用MixedSetter使属性支持多种设置方式。 本组件基于 antd 的 Table 扩展。...由于我们暴露出的属性 dataSource和 columns是复杂结构,自动生成的描述不能满足需求,所以手动更改描述文件: import { ComponentMetadata, Snippet } from...dataSource支持绑定数据源和直接写 json,所以使用 MixedSetter。 四、坑点 如果你用的是 antd 组件库,那么会遇到个大坑。

    2.4K21

    SpringBoot版的低代码开发平台,关联无 SQL,性能高10倍!

    今天在逛开源社区的时候,发现了一个基于 Spring Boot 技术体系的低代码开发平台 Diboot 挺有意思的,号称“关联无 SQL,性能高 10 倍”。...CRUD 无 SQL 关联绑定无 SQL(注解自动绑定) 数据字典无 SQL(注解自动绑定) 跨查询无 SQL(自动构建 QueryWrapper 与查询) BaseService 扩展增强,支持常规的单及关联开发场景接口...CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 根据你本地情况修改 application.properties 中的配置参数,比如: 数据库连接信息: spring.datasource.url...= spring.datasource.username= spring.datasource.password= 前端项目相对路径(前端 Vue 框架选择 antd 还是 element,默认是 antd...使用 devtools 生成后端代码 点击"数据管理"菜单,在这里可以建、维护表字段与关联关系、索引、生成及更新后端代码等。 数据管理 8.

    1.3K40

    使用antd表格组件实现日程

    环境搭建 因为公司的项目是基于jsp的,antd本想用Vue版本的,无奈它与jsp的一些语法冲突了跑不起来,于是就尝试了react版本的antd,它跑起来了没有发现任何兼容性问题,一切正常。...表格展示的内容为每一天的数据,每一天的数据分为:上午、下午、晚上三个时间段。 日程内容分为天日程和某个时间段的日程两种状态,如果为天日程则需要进行单元格合并。...最后实现的效果如下所示,实现代码请移步:react-antd-schedule/index.html image-20201119175256753 动态增加列 这个日程用户可以通过点增加图标来增加一列日程...,此时我们就需要往表格头部增加一列数据,一开始我觉得只要往antd的columns和dataSource中添加一条数据就行了,如下所示: const App = () => { const...,他会执行删除某个日程,此时表格渲染函数就要从columns和dataSource中各删除一条数据了,一开始我是直接覆盖其数据,这样做引用地址没变,就引发了动态增加列的那个bug,antd监听不到引用地址改变没有刷新页面

    3.7K20

    基于f2从零实现移动端可视化编辑器

    我们先来看看实现的基本预览图: 640 (2).gif 你将收获 基于antv/f2实现可视化图形组件的封装 如何设计表格编辑器并集成到antd的Form中 数据可视化组件的schema约定 利用js-xlsx...我们就暂且相信它官网的描述,接下来的技术实现笔者也会基于f2做可视化组件的二次封装。...image.png 上图为一个可视化组件编辑器的基本模型,组成结构大致为: 图表组件 数据源 属性编辑器(组件标题,颜色,对齐等属性) 所以说我们大致可以抽象为如下原型: image.png 组件列表为我们提供选择不同组件的能力...2.2 基于antv/f2实现可视化图形组件的封装 由于市场上暂时没有比较成熟的基于f2的react组件等封装, 所以这里笔者对其做一个简单的二次封装来实现我们的组件定制的需求。...2.3 设计表格编辑器并集成到antd的Form中 表格编辑器的实现我们主要基于antd的Table组件来实现,当我们点击数据源的时候,会弹出表格编辑器,我们先来看看效果: image.png 我们可以直接对数据源进行编辑

    1.6K30

    低代码引擎实战 - 从零封装低代码组件

    由于时间关系,先只暴露 dataSource 和 columns 属性,通过 columns 属性,我们将学会如何使用 ArraySetter 动态设置数组。...通过 dataSource 属性,我们将学会使用 MixedSetter 使属性支持多种设置方式。 本组件基于 antd 的 Table 扩展。...由于我们暴露出的属性 dataSource 和 columns 是复杂结构,自动生成的描述不能满足需求,所以手动更改描述文件: import { ComponentMetadata, Snippet }...dataSource 支持绑定数据源和直接写 json,所以使用 MixedSetter。 四、坑点 如果你用的是 antd 组件库,那么会遇到个大坑。...官方的 demo 又更新了,新增了 antd 所有组件的支持,如果没有特殊需求,直接用官方提供的组件省时省力。

    99850

    多年管理系统开发经验总结~代码解决方案

    的Tabs:如果只是单纯的点击切换模块,没有进行模块的特殊处理,则不需要onChange的方法,和状态存储 ,确定我们想要的,避免无效代码 关于以上的问题,我基于以往的项目,整理了一下管理系统的组件结构思路...,希望可以在你的项目开发中提供一些帮助 #概述 公共结构 关于一个管理系统,使用最多的便是增删改查,主要的逻辑是对数据的操作,基于以往的项目可以提取以下部分的公共结构 数据流向 搜索排序分页通过操作的参数获取...page, pageSize }); } return ( <Table style={{ marginTop: 20 }} size="small" dataSource...我们对查询数据进行了搜索和分页的分类存储,但是都保存在一个变量里,如果后期加排序或者其他参数,不会影响之前的逻辑,可以在原有基础上进行扩展,有效减少补丁的数量 对弹窗参数数据的统一存储,可以拓展弹窗的title或者其他属性...,不需要在添加state来打补丁,直接增加modalProps属性即可 关于线网 把数据的加工都统一放在了业务逻辑层指index.js进行数据处理,提供给其他组件相应的处理函数 对弹窗组件进行柯里化处理

    87320

    Antd源码浅析(二)InputNumber组件 一

    前言 上篇我们讲了Icon组件,Icon组件是Antd源码库中实现比较简单的组件,适合大家入门,这篇文章主要和大家一起分析一下数字输入框组件,即InputNumber,难度适中,但蕴含的Antd里较为经典的开发场景...,适合大家比较深入的了解Antd背后的思想。...这篇我们学习的目的主要有: 学习Antd的如何基于现有的组件封装 封装背后的技术目的和效果如何 目录结构 首先我们依旧看看位于components 文件夹下的input-number 目录结构: InputNumber...Antd的许多组件都是基于rc-xxx组件分装,比如常见的Table组件是基于rc-table,Form组件基于rc-form,rc-xxx来源于react-component组件库,里面有很多常用的组件...初始值 number disabled 禁用 boolean false formatter 指定输入框展示值的格式 function(value: number \ string): string

    2.1K40
    领券