前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。 一、基础表格Table组件基础Apibordered属性：是否展示外边框和列边框columns属性：表格列的配置描述（即表头）dataSource属性：数据数组pagination属性：分
转载
2024-02-05 04:44:30
63阅读
Ⅰ- 壹 - 功能展示和使用需求需求描述基于antd 实现表格要实现多个多选互不影响包含 全选 半选 。（可自由拓展）功能展示可以禁止选择某一个Ⅱ - 贰 - 封装代码import { Checkbox, Table } from 'antd';
import React, { useEffect, useState } from 'react';
const MultipleMultipleT
转载
2024-04-09 12:42:56
298阅读
效果图： <template> <div> <a-button class="editable-add-btn" @click="handleAdd"> Add </a-button> <div> <a-table :columns="columns" :data-source="data" bor
原创
2022-09-20 12:02:32
883阅读
antd的表格中勾选状态的控制 的基本逻辑是通过表格属性的rowSelection的selectedRowKeys来实现的。它是一个数组。记录了所有勾选项的字段（常见的比如id）const rowSelection = {
selectedRowKeys,
onSelect: (record, selected, selectedRow) => {
},
概述如果用 react 开发前端, 建议基于 antd pro 来开发, antd pro 是 antd 的增强版, antd 是组件库, antd pro 则是前端框架, 基于 antd pro, 创建工程时不用再考虑:路由的设置, 以及和菜单的联动面包屑和路由的联动发布打包的方法工程 lint后端 API 访问方式页面状态的管理… …总之, 对于管理类型的应用, 基于 antd pro, 可以
转载
2020-04-16 17:31:00
716阅读
2评论
前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。一、头部固定scroll属性：设置横向或纵向滚动，也可用于指定滚动区域的宽和高
<Card title="头部固定">
<Table
转载
2024-06-12 04:42:41
1362阅读
rowKey相当于行的主键，不同行不可以有相同的rowKey，有的话虽然行数据会渲染，但是所有rowKey相同的行都会自动高亮。 key是列的主键，不同列可以有相同的key，或者不设置也可以，但是如果多行的dataIndex相同的话，列的key就应该不同以区分不同列。 ...
转载
2021-07-26 14:41:00
2579阅读
2评论
a-table组件中加入以下两个属性:customRow="rowClick":rowClassName="rowClassName"/*** @Author: 路博欢* @Date: 2
原创
2023-03-09 17:22:40
743阅读
在上面的table中，使用了两处的渲染，第一个是是否，第二个是两个按钮我们选来看第二
原创
2022-07-07 17:49:26
1114阅读
antd-theme-generator 源码解读antd-theme-generator只是针对于颜色的定制，对于其他属性例如字体大小，边框，边距等样式不提供定制这里只针对generateTheme方法和其涉及到的方法进行讲解，其他的方法不予以讲解。官方文档有使用这个方法的例子，请参考：https://github.com/mzohaibqc/antd-theme-generator参数opti
转载
2024-07-27 09:47:18
39阅读
简介antd的部分组件是基于react-component封装而来的，今天我们要讲的antd table也是基于react-component/**table**封装而来的，这次antd的源码解析，大部分也是基于rc-table，这次源码分析主要是讲一些特殊的知识点。如果想了解更多，可以评论一下，我看到评论后会添加。antd Table先上源码的链接 从这里可以看到antd Table的代码只有5
转载
2023-08-30 10:45:59
332阅读
在制作表格的时候选择配色尤为重要，如果选择了不美观的配色就完全不会有让人看下去的冲动，这时候你就可以看看下面这篇文章啦，为你详细介绍了几种配色方法，希望对你有帮助哦！最简单粗暴的方法：使用主题统一风格制表者选择颜色的关键是要在专业性和趣味性之间做出平衡。如果用户对颜色搭配不熟悉，使用 Excel 中预定义的颜色组合是一个不错的选择，也就是使用主题快速创建具有专业水准、设计精美、美观时尚的表格。主题
转载
2024-07-03 20:04:22
135阅读
我写了两种方法 一种是前端处理数据渲染一种是后端处理数据渲染数据结构略有不同 下面上代码<template>
<page-view :title="title">
<h1>第一種數據結構，前端渲染</h1>
<a-table :columns="columns" :dataSou
转载
2024-07-03 22:23:51
54阅读
今天刚刚运用antd做了个分页，根据官网上的指导和一些自己的摸索，将其完成，有些代码编写的还是比较繁琐，没有做简化。antd官网讲的还是比较详细的，有案例，本例在其基础上扩展了一下功能，现将其按照例子的方式记录下来，以供以后参考。 先将显示出来的效果放出来（注：本次案例是点击一次页码请求一页数据）： 编码过程大体需要以下几步：1.初始化必要属性，如数据 data，数据条数 co
转载
2024-05-30 23:22:16
716阅读
前段时间迭代不是很忙，抽空写了个表格合并的函数。这边对此进行简单记录一下。主要实现的功能如下：（ps：该函数需要搭配antd Table使用）1.表格数据处理：按照某列处理为相同数据展示在一起2.单行列的表格数据合并，对于某列进行指定行范围的列合并， 或对于某行进行指定列范围的行合并3.整体表格的数据合并，对于指定的两个区域，分别进行行合并和列合并 原理说明如下：通过 colSpan,r
转载
2024-03-22 14:11:29
49阅读
React Hooks & antd table render
转载
2021-03-25 10:14:00
223阅读
2评论
<a-table rowKey="id" bordered :dataSource="dataSource" :columns="colu
原创
2022-07-06 11:37:58
918阅读
做过后端管理系统的“猿们”都知道，后端界面的框架无非就是左右结构【左边是菜单栏，右边是具体业务的功能界面】。但是右边的功能界面，我们又能拆分出来一些公用的控件：搜索栏、操作按钮栏、列表【table、tree、treetable】等，今天小编大致说下自定义操作按钮栏控件的封装以及实现。首先，在做自定义控件之前，我们要想清楚我们封装自定义控件的目的，以目标为导向去实现。(以上内容纯属片汤话儿)1.目的
