随笔分类 - Ant Design
基于react.js使用的antd组件内容
摘要：效果图: 左侧是表格项,顶部是年份 这种适合在手机等小屏展示表格数据 后段返回的数据格式 0: {key: 2010, year: 2010, aAmount: 946, bAmount: 681, cAmount: 469, …} 1: {key: 2011, year: 2011, aAmoun
阅读全文
摘要：通过自定义属性设置,实现一个周末与工作日的不同颜色设置 效果图: 使用的属性: 自定义头部设置 headerRender 自定义日期显示 dateFullCellRender 代码: <template> <div class="box"> <h3>1.自定义头部; 2.自定义日期显示,工作日显示,
阅读全文
摘要：根据官网的写法,在app.vue文件引入国际化设置组件 <template> <a-config-provider :locale="locale"> <App /> </a-config-provider> </template> <script> import zhCN from 'ant-de
阅读全文
摘要：如下, 使用:value 给 calendar 设置默认值, 按照官方文档要求的格式, 引入 moment, 设置值 <template> <a-calendar v-model:value="date1" :fullscreen="false" @select="selectDate" /> </
阅读全文
摘要：业务场景: 通过点击增加按钮,可以动态增加一列表单项,点击删除,删除此项 代码githup地址: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views/form/mutilForm 但是 最后的提交按钮是在父页面,点击提交时,需
阅读全文
摘要：之前写了两层和三层数据的表格合并,数据处理.这种事先确定了表格的层级 如果表格的层级在一定范围内不固定,就需要动态处理了,最近研究了下,把方法记录下来 代码githup地址: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views
阅读全文
摘要：ant-design-vue 数字输入组件的常用校验方法 githup地址: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views/form/inputNumber 这里的格式是,只能输入数字或小数, 整数部分每三位添加一个逗号
阅读全文
摘要：效果图: 代码githup地址: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views/table/styleTable ant-design-vue 的表格有几个属性可以设置表格的样式 1. rowClassName: 可以设
阅读全文
摘要：如图,左侧的菜单是动态生成的,前面的icon图标也要动态创建 实现方法: 使用vue的 createVNode 定义一个生成icon的文件: createIcon.js import * as icons from "@ant-design/icons-vue"; import { createVN
阅读全文
摘要：项目使用的react ant-design-pro版本 5.2.0 bpmn-js版本 6.3.4 注意: 不同版本的bpmn写法不一样,我这个写法是适用6.3.4的版本,较新的版本可能不适用 如果使用vue或其他框架,写法按照你框架的写法, bpmn-js调用的方法还是一样的 效果图: 查看流程图
阅读全文
摘要：如图,要实现的功能,将已点击过的菜单展示在顶部的tabs中,切换tab内容缓存.删除tab后清除页面缓存,点击菜单再打开是新页面 实现: 使用的是react-activation,其中有umijs的实现demo 官网地址https://www.npmjs.com/package/react-acti
阅读全文
摘要：将antPro项目复制到另一项目后,安装依赖,启动后 页面一直在加载中,控制台报错 umi/node_modules/@babel/runtime/helpers/esm/defineProperty" does not exist in container. 解决方法,删除项目src里的.umi文
阅读全文
摘要：如图,需要把全部的icon展示出来,可以选择 ant-design的icon使用一般是用到哪个引入.当然也可以引入全部的icon 并且可以通过传入component来创建icon 实现方法: 注意点: 获取到的全部icons里面有一些是fuanction,要过滤掉 import React from
阅读全文
摘要：ant-design-pro项目的菜单可以在config文件夹下的routes.ts文件里配置. 如果需要通话后端数据接口获取,官方也提供了方法 routes.ts文件里的路由还是要添加,和静态路由是一样 菜单接口数据, commonLayout公共页面部分 和redirect菜单重置部分不需要了,
阅读全文
摘要：今天从ant-design-pro官网下载了项目,启动后引入了pro-form表单,页面显示发现input和select组件样式没生效 pro-form依赖的是antd的表单组件,只需要从antd引入对应的表单组件后,pro-form样式就生效了 遇到相同问题的可以试试
阅读全文
摘要：table表格支持这种树形可展开的形式,只需要在tableData中有children数据 不过这种用法是一开始获取表格数据时,就把children数据拿到了 实际场景中可能需要点击展开按钮时再去调取children数据 可以有两种方法实现这个需求 第一种: 通过expandable的onExpan
阅读全文
摘要：有一个全国行政区域地图,可以点击下钻, 正常是先把地图引入,在注册 import china from './china.json' // 注册地图 echarts.registerMap('全国', china) 但是这种可以点击的,一开始就全部引入浪费,需要动态加载数据 json文件可以直接请求
阅读全文
摘要：Protable自带表单筛选,一般场景适用. 也提供了一些api,方便不同场景使用.这里列出几种常用的属性 api: 1. labelWidth form表单label的宽度,可以是number或者'auto'.默认是80px,实际使用设置为auto更好 设置方法 <ProTable ... sea
阅读全文
摘要：使用微服务后,遇到一个问题,主应用和子应用的主题色不一致.希望可以通过主应用的颜色动态变换子应用的主题色 ant-design-pro可以通过config.ts配置全局主题色 所有最优的方法是可以通过改变主题色,来动态配置.官方最新版本的https://github.com/ant-design/a
阅读全文
摘要：微服务现在挺火的,优点也很明显 如果有多个应用都有相同页面时,就可以使用微服务,可以避免重复写代码 在网上搜了下,很多例子都是基于官方文档的例子,官方文档:https://umijs.org/zh-CN/plugins/plugin-qiankun.比较简单,实际使用场景会有特殊情况 我根据自己项目
阅读全文
