PHP 代码分享
MongoDB 教程
正则表达式
jQuery 教程
JavaScript 代码片段
PHP7 教程
最近，在AntDesignBlazor组件库中实现多标签页组件的呼声日益高涨。于是，我利用周末时间，结合Blazor内置路由组件实现了基于`Tabs`组件的`ReuseTabs`组件。最近，在AntDesignBlazor组件库中实现多标签页组件的呼声日益高涨。于是，我利用周末时间，结合Blazor内置路由组件实现了基于Tabs组件的ReuseTabs组件。前言Blazor是.NET最新的前端框架，可以基于WebAssembly或SignalR（WebSocket）构建前端应用...
继续阅读 >
完美解决ant-design-vuetable可伸缩列问题，实现在固定列，多级表头情况下的伸缩列这个东西本来以为手到擒来，因为在官网中已经给出了例子，但是果然还是不能太信任官方，官方给出来的只能是最基础的，然后我们正常的使用场景往往要复杂很多，比如固定列，比如固定表头，比如自带checkbox列，比如多级表头的情况。要想满足这些情况往往需要自行开发。1.首先蒋官方的例子copy下来，居然拖不动。对照了一下官方，css居然都不一样...
继续阅读 >
前言：本篇文章只介绍在AntDesignPro登录功能中集成图形验证码组件的方法步骤，服务端方法请参考《基于OAuth2.0授权系统的验证码功能》正文：在AntDesignPro模板中，使用账号密码登录功能部分（如下图），并没有做图形验证码的开发，所以这部分功能就需要我们自己去实现。这里登录功能其实本质是一个表单提交，所以我们只需自己开发一个图形验证码表单控件就可以，具体实现如下。1. 图形验证码表单控件代码CaptchaInput.t...
继续阅读 >
基础知识1.使用脚手架创建项目并启动1.1安装脚手架：npminstall-gcreate-react-app1.2使用脚手架创建项目：create-react-appantd-start-demoantd-start-demo为项目名。1.3启动npmstart2.npm转换为yarn2.1安装yarn：npminstall-gyarn2.2获取yarn当前的镜像源：yarnconfiggetregistry2.3设置为淘宝镜像：yarnconfigsetregistry'https://registry.npm.taobao.org'2.4常用命令：yarnin...
继续阅读 >
AntDesignPro官方文档说明在菜单中使用自定义的icon由于umi的限制，在router.config.js是不能直接只是用组件的，Pro中暂时支持使用ant.design本身的icontype，和传入一个img的url。只需要直接在icon属性上配置即可，如果是个url，Pro会自动处理为一个img标签。如果这样还不能满足需求，可以自定义getIcon方法。如果你想使用iconfont的图标，你可以使用ant.desgin的自定义图标.1.getIcon方法/*eslint...
继续阅读 >
我就废话不多说了，大家还是直接看代码吧~antdesign的table组件实现全选功能以及自定义分页直接附上全部代码以及截图了import'./index.scss';importReactfrom'react';import{Checkbox,Table,Popconfirm}from'antd';classTestComponentextendsComponent{constructor(props){super(props);this.state={visible:false,indeterminate:true,checkAll:false,data:this.getData(),pageSize:10};}s...
继续阅读 >
我就废话不多说了，大家还是直接看代码吧~/***Createdbyhao.chengon2017/4/15.*/importReactfrom'react';import{Table,Button}from'antd';constdata=[{key:'1',name:'张三',age:22,address:'浙江省温州市',},{key:'2',name:'李四',age:42,address:'湖南省湘潭市',},{key:'3',name:'王五',age:12,address:'四川省成都市',},{key:'4',name:'赵六',age:25,addr...
继续阅读 >
最近因为业务接触了antd，使用antd完成一个复杂的树形表格的显示以及修改。在这其中遇见了不少坑，很多功能antd只写了初步的功能，更为细化的功能只能自己完善。踩过的坑都写在了这里。树形表格的显示在antd中对于表格的key值有着严格的控制，每一个row都必须有一个独一无二的key值，可以是数字也可以是字符串。这一点和我曾经使用过得iview有着很大的区别。react使用key来代表每一行是为了避免重新渲染的问题，这个优化也在实际的...
继续阅读 >
为什么我同样的功能要用react、vue都写一遍？啊我真是不是闲的蛋疼啊(～o～)~zZ在antdesignvue中，表格的第一列是联动的选择框截一张官方文档图，图示最后一排就是禁用状态点击checkbox会触发onChange,从而得到selectedRowKeys,selectedRowKeys就是选中的key数组。onChange:(selectedRowKeys,selectedRows)=>{console.log(`selectedRowKeys:${selectedRowKeys}`,'selectedRows:',selectedRows);},默认...
继续阅读 >
项目中会遇到需求就是table表格中选中在侧边展示，侧边删除，table中选中取消的联动选中ui框架：Antdesignvue组件：table和taghtml中<templatev-for="tagindataType"><!--key不能使用index--><a-tag:key="tag.id"closable:afterClose="()=>deleteDataType(tag.id)">{{tag.title}}</a-tag></template><a-table:rowSelection="rowSelection()":columns="columns":dataSource="filterTypeData":pagination="p...
继续阅读 >
标签<ProTable>Pro-Table是阿里AntDesignProV4版本，在Table基础上再封装的一个组件，包含完整的增删改查逻辑，不用复杂的操作，简单几个配置即可实现官网Api地址https://protable.ant.design/示例V4版本刚出不久，网上的教程还比较少，踩了不少坑，把自己学习过程分享出来，希望可以帮到你创建项目（需要node.js及npm环境）npmconfigsetregistryhttps://registry.npm.taobao.orgnpmiyarn-gyarnconfigsetregistryht...
继续阅读 >
1.设置表单的值this.props.form.setFieldsValue({name:"张三",});2.清空表单的值this.props.form.resetFields();3.获取某一输入框的值this.props.form.getFieldValue('newPassword');4.获取整个表单的值this.props.form.getFieldsValue();多看官方文档就知道这些东西了补充知识：react使用antd表单赋值，用于修改弹框1、使用getFieldDecorator的initialValue2、在state里定义一个变量存表格的数据3、给打开弹框的方法传个record4...
继续阅读 >
前言最近在用AntDesign写一个后台，遇到的需求就是实现一个可动态增减和编辑子节点的Tree。GitHub上看了一圈，没好用和合适的。索性就基于AntDesign中的Tree组件写一个。实现的效果如下：可以增加子节点可以删除子节点可以编辑子节点信息可以取消编辑信息具体的效果图如下：主要的就是借助TreeNode的title属性，它的类型是string|ReactNode。正文经过分析，一个节点的数据结构应该是{value:'Root',//显示的信息defaul...
继续阅读 >
我出现的问题：例如在编辑活动关联红包的时候，需求是select显示的是红包名称，但是表单提交的时候是红包ID：设置默认值的initialValue为Id的时候，会出现显示是id(需要的是显示名称)；如果设置默认值initialValue是名称，那么下一步操作会出现报错但是我还有一种情况：某个活动关联的红包被删除了，在Select中的可供选项中redPackets没有这个红包的时候，显示的会是红包id,而不是红包名称错误效果图：期待正确效果图解决方案：在...
继续阅读 >