简介在前端开发中,表格一直都是最复杂的组件之一。表格不仅要支持丰富的操作(排序、过滤、搜索、分页、自定义列等),还要有非常好的性能以展示大量数据。很多组件库(例如 fusion design,ant design)提供了功能丰富的表格组件,但这些表格一开始很少考虑性能问题,往往是后面遇到性能瓶颈问题时才考虑添加虚拟滚动特性,但此时过多的表格功能使得性能优化的难度非常高。ali-rea
/* * 构建数据列 * */ tableColumns = (currentData) => { let group = lodashGroupBy(currentData, 'level1'); console.log('group', group); return [{ title: '统计事项一级目录', dataIndex: ...
原创 2022-05-05 15:04:34
598阅读
React学习笔记3(React路由、Ant Design)零 l 一 l (一)【了解】一些概念1、SPA(Single Page web Application 单页Web应用)2、路由3、路由组件与一般组件(二)效果图(三)< BrowserRouter > 与 < HashRouter >(四)< Link > 、 < Nav
转载 9月前
49阅读
前言这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果。对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就是添加类与删除类的操作。这对于学习 React 来说是一个非常简易的例子,但是我并不会在教程中介绍相关的前置知识,比如 JSX、ES6 等,对于小白来说可能还会有一些困惑的地方,所以还要了解一下 Rea
转载 2024-07-25 13:12:02
82阅读
完整版下载地址:https://gitee.com/dgx/DiReactPagination完整版演示地址:http://dgx.gitee.io/direactpagination/build/index.html#/  一.准备工作我们是继续基于这个demo项目实现一个分页插件,这个分页插件会用在各个需要的组建当中。分页插件的名字我们就叫做:DiReactPage分页插件
转载 2024-07-05 07:29:38
71阅读
哈喽,刀友们!今天给大家分享一些在B端设计中常用的开源组件库,都是非常nice的设计案例参考,需要的小伙伴可以保存收藏。01 Ant Design图片来源:墨刀素材广场Ant Design是蚂蚁集团基于大量的项目实践和总结,研发的服务于企业级产品的设计体系。Ant Design提供了丰富的基础 UI 组件,以及各个组件的使用方法。不仅有通用业务模块页面,还有各种表单、列表、导航、落地页、按钮等组件
这篇文章来讲解一下angular内置的filter过滤器.没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就是过滤器的名字~这个过滤器是干嘛的呢? 它的作用是: '从数组中过滤出需要的项,放入新的数组并返回这个新数组。'一.用在html模板里:因为是用来过滤数组,所以这个过滤器基本上都用在ng-repeat指
官网文档:https://l7.antv.antgroup.com/tutorial/quickstart安装依赖// 安装L7 依赖 npm install --save @antv/l7 // 安装第三方底图依赖 npm install --save @antv/l7-maps初步实现src\pages\Map\china.tsximport { Scene } from '@antv/l7'
传统做法前端维护状态,手动操作DOM更新视图。前端框架对服务器数据通过模版进行渲染。当用户产生了一个动作之后,我们通过document.getElementBy... 手动进行DOM更新。  框架帮忙分离数据和视图,后续状态更新需要手动操作DOM,因为框架只管首次渲染,不追踪状态监听变化。双向数据绑定当我们在前端开发中采用MV*的模式时,M - model,指的是模型,也就是数据,V -
react + Ant Design后台管理系统下载命令:npm install antd --save官网:https://ant.design Step 1:安装脚手架工具 (Node.js 需要 v4.x 或以上)$ npm install antd-init -gstep 2:创建项目&初始化$ mkdir ant-design-demo && cd ant-de
1,开始的思路公司想做直播方面的项目,并想加入弹幕的功能,直播的页面已经作为一个组件放在了用react+redux写好的一个网站项目上。所以技术老大让我研究下如何用react实现弹幕的功能。下面我就简单说下我的react弹幕折腾之路。一开始其实是两手空空,作为一个php的初级开发人员,我对前端技术掌握的很少,远不到熟练的程度。所以,我得从头学习如何用js+css实现弹幕,然后再将弹幕移植到reac
转载 6月前
34阅读
React 模板封装之 BaseTable前言一、基础模板 BaseTable二、使用案例三、API 使用指南四、源代码五、总结 前言前面有写过几篇 React 组件封装的文章。今天来记录下 React 模板封装之基础模板 BaseTable。组件与模板 组件相信大家都知道,只要是相同的框架内,组件可以用于任何项目中。比如 antd 的 table 组件,只要有表格的场景都可以使用 table
转载 2024-02-27 12:44:06
108阅读
今天刚刚运用antd做了个分页,根据官网上的指导和一些自己的摸索,将其完成,有些代码编写的还是比较繁琐,没有做简化。antd官网讲的还是比较详细的,有案例,本例在其基础上扩展了一下功能,现将其按照例子的方式记录下来,以供以后参考。 先将显示出来的效果放出来(注:本次案例是点击一次页码请求一页数据): 编码过程大体需要以下几步:1.初始化必要属性,如数据 data,数据条数 co
转载 2024-06-19 15:21:37
854阅读
AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时,某些列使用右fix会出现错乱问题(可能我使用的方法有误),试用React版看会有问题不 publi
转载 2020-02-08 12:38:00
169阅读
2评论
React Hooks & antd table render
转载 2021-03-25 10:14:00
223阅读
2评论
一、Ant Design of React ://ant.design/docs/react/introduce 二、建立webpack工程 webpack+react demo下载 项目的启动,参考 三、简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js
转载 2016-07-20 21:21:00
663阅读
2评论
2.组装编辑界面 /** * Created by hldev on 17-6-14. */ import React, {Component} from "react"; import {Link} from "react-router-dom"; import {inject, observer
原创 2022-05-05 14:11:04
833阅读
去年本人发布一个基于 Vue 3.0 + TS 的自定义表单插件。得到了不少掘友的肯定。当然也提出了不少的问题、优化与新的需求。以及也有很多小伙伴问有没有 React 的版本,我就基于 React + TS 做了一版 React 版的自定义表单插件,当然这次做的 React 版本里带来了很多全新的功能以及特性,目前刚做好初版,先做个简单介绍,对于有这方面需求的小伙伴可以在线 demo 体验一下。
react 封装通用组件之table组件工作中发现我们在做react后台管理系统的时候,会有大量重复的页面(如下图),比如form表单和table组件、以及接口通讯,新增修改modal等。虽然antd里面的组件已经很简便了,但是遇到众多功能类似的页面,每次都复制大量的代码还是会耗费很大的时间而且不易维护,看起来很不清爽,于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的业务。table表格的
转载 2024-05-31 01:19:46
888阅读
最近参与了一个基于Raact技术栈的项目,距离我上一次在工作中react已经过去了挺长一段时间,因此打算整理在react中封装组件的一些方法。1、extends 正向继承对于类组件而言,可以通过extends继承某个父类,从而获得一些公共的能力class LogPage extends React.Component { trackLog() { console.log("tr
转载 2024-06-06 05:55:21
110阅读
  • 1
  • 2
  • 3
  • 4
  • 5