实现需求：在react项目中，在满足表格头部列可以拖动改变的情况下，还要表格利用滚动条下拉来加载表格数据？如下图：**方案一：**利用react-infinite-scroll-component插件，但是表头无法固定，一旦样式固定定位写死，就无法满足拖动，如果你的表格列不需要拖动的话，可以使用，比较方便；**方案二：**先实现ant-ui表格组件的滚动，然后监控表格滚动条，快到达底部后触发加载数
转载
2024-07-26 07:59:01
418阅读
一、基本使用一个Table表格主要由表头和表格内容（即数据）组成，所以最基本的Table就是由column、dataSource这两个属性组成。const dataSource = [{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号'
}, {
key: '2',
name: '胡彦祖',
age: 42,
转载
2024-03-03 15:48:55
482阅读
项目场景：老板要求有相同数据时，那一列就需要合并起来，还能怎么办，硬着 ‘头’ 去实现吧问题描述：看了 Ant design官方文档 的旁友可以了解到 单元格 有一个属性 rowSpan， 它的value是数字，数字越大，渲染占据的行数越多，为0时那一个单元格不会渲染，可以看看下方这个不严谨的图由于本人有点菜鸡，所以动态合并的方法是参考了其他兄弟弄出来的，但是后面发现了个问题，他们的解决方法在有翻
转载
2024-04-10 17:14:51
69阅读
效果预览Shadow DOM Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中， Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上 [ MDN ]
需求 最近接到的一个需求，在table栏中实现属性的可编辑单元格，并且table内部可动态删减的单元格，外部操作新增或删除一行新旧数据的操作，无交互的前端实现，这篇文章希望对你有帮助。想法或思路如何去实现这一功能，无非是数组的增删改查 1、规则模块单独抽离出来，封装成一个公共组件，实现代码的可用性，在今后的开发中，没有局限性的限制，整个团体都可以使用你开发的东西，这是一个循序渐进的过程。 2.开发
转载
2024-05-20 21:57:38
283阅读
ReactJS1.1.分层 上图中，左侧是服务端代码的层次结构，由Controller,Service,Data Access三层组成服务服务端系统。右侧是前端代码的结构，同样需要进行必要的分层：Page负责与用户直接打交道：渲染页面，接受用户的操作输入，侧重于展示型交互性逻辑；Model负责处理业务逻辑，为Page做数据，状态的读写，变化，暂存等；Service负责与HTTP接口对接，进行纯粹的
转载
2024-07-30 17:24:14
276阅读
Ant Design中Table表单行列合并Table组件实现方法 Table组件前几天，客户有个需求，就是把一个excel表做成一个页面，里面的行列都可能会合并。 类似这种的： 一般第一步都会先看一下ant design的文档，看看是否有相似的。最后发现是有相似的页面。像这种： 但是我当时就仅仅只关注了Table组件的colSpan这个属性，这个在这个上面是写死的，当时可能是脑子秀逗了，不知道
转载
2024-03-26 14:09:12
222阅读
vue.draggable 拖拽项目需求中，需要支持拖拽，即找到了vue.draggable，下面来说一下基本使用方法 1.首先需要安装它，官网地址 https://www.itxst.com/vue-draggable/tutorial.html 2.安装 npm i -S vuedraggable 3.基本教程请看官网例子 我这边是根据后端接口请求的数据进行布局与官网例子稍有不同 我们首先看一
转载
2024-05-15 20:35:47
2357阅读
背景：官方和网上的例子都很简单，实际项目开发中比较的一般都是对象数组，且属性值不一定全为数值，有可能为字符串,比如某个数据没有值，默认显示字符串："--" 需求：降序或者升序无数值的在最后面显示 开发步骤： (1)HTML：<a-table @change='compare' :columns='c ...
转载
2021-08-05 14:20:00
1041阅读
2评论
目录 前言 导语 代码部分 第一步 第二步 总结 运行结果 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语
原创
2023-08-07 07:20:49
148阅读
目录前言导语代码部分第一步第二步总结运行结果前言 我是歌谣 我有个兄弟 巅峰的时候排
原创
2023-06-03 07:04:26
120阅读
以前用EasyUI的，但是最近想做前端的表格，找到了JQuery的Datatables插件，非常不错。本来以为给表格加一个序号很简单，可是看了Datatables的官方实现看似代码也不简单，测试发现了一些问题，用的不爽。网络上并没有搜索到好的解决方案，就跟踪代码，自己找到了一种方法，本文在最后就给出了这种实现。1、版本问题最新的版本1.10，和以前版本做了很大的调整，但是也部分兼容老版本Api的使
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.Less在线编译 - 前端引入Less2.多套Css皮肤实现3.覆盖样式实现4.Css变量实现5....若干方案一个换肤，就有很多种方案，那么就要好好考虑了项目实际情况 由于我们的项目是基于React + Ant-Design开发的，那么我最想用的是Ant-Design的官方方案，于是随着时间流逝，我发现Ant-De
作者：陈帅等13w人antd@4 rc 发布已经有一段时间了（大概已经两周了），官网[1] 也已同步放出。最为一个酷爱尝鲜的人，当然要第一时间安装升级。在咨询了豆酱老师得到了api 不会修改的承诺之后，我已经在自己的项目中迁移完成。第一时间享受到了的 antd@4 各种优势。???? 升级点首先对我而言最大的改进在于性能，select ，table 和 tree 已经全面支持了虚拟滚动，
在 columns 中定义表头样式 因为设置 样式 display 为 none 会导致页面元素塌陷 所以想了下面的方法 把 title 去掉 width 宽度置为 0 达到所要的效果 { title: policyNoTypeToTable == '0'? '支付方式' : '', // 根据特定 ...
转载
2021-09-26 17:14:00
4760阅读
2评论
官网文档：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'
传奇开心果博文系列博文系列目录Ant Design Mobile of React 开发移动应用博文系列博文目录前言一、使用布局方式的重要作用二、各种布局方式介绍三、各种布局方式的示例代码四、归纳总结知识点 博文系列目录Ant Design Mobile of React 开发移动应用博文系列第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从hello
一、按钮Buttonpages->ui->button.js：对应路由/admin/ui/buttonsimport React from 'react';
import {Card, Button, Radio} from 'antd'
import './ui.less'
class Buttons extends React.Component{
state = {
转载
2024-02-26 20:26:55
96阅读
背景项目需要表格支持拉伸每列的宽度，查看了文档，官方建议是用 vue-draggable-resizable 插件结合 components 属性，给表头 header 增加一个可拖拽的功能。其实下面的前三个问题都很好解决，网上也有很多解决方案，但因为考虑到项目中表格很多，而且每个表格都要支持拉伸列宽度，所以不可能按官方文档那样，每个表格的 vue 组件都写重复的代码，所以就封装了一个方法，专门获
转载
2024-07-24 09:52:03
2510阅读
