工具类
nvm下载
windows:https://github.com/coreybutler/nvm-windows/releases/download/1.1.10/nvm-setup.exe ,
mac:待补充
vscode下载
window:https://pc.qq.com/search.html#!keyword=vscode =>(电脑管家的软件管理搜索比外面的各种搜索结果更纯粹)
mac:待补充
git下载
window:https://pc.qq.com/search.html#!keyword=git (同上面vscdeo的下载方式)
mac:待补充
4. iconfont一键导入购物车插件
链接: https://pan.baidu.com/s/1uhacY5Nlhg7YxOf12m3GNw?pwd=aaaa 提取码: aaaa
代码类
代码块备注
示例:
![](https://i-blog.csdnimg.cn/blog_migrate/15eaef9191fad3ac7b4521e11c88757e.png)
上述常规备注并不会带有其文字的提示可以更改为:
![](https://i-blog.csdnimg.cn/blog_migrate/3dcb31e7317eb6b562213f28f7d54916.png)
则会带有提示,进阶类
![](https://i-blog.csdnimg.cn/blog_migrate/378e7af2851c55d6dd918bbab1aa9572.png)
/**
* 修改存放地点
* ----------
* @param params {
* 地点ID id:string
*
* 地点名称 placeName:string
* @returns
*/
在文字下方增加【----】方框内的内容会把文字的字体大小增加,@param 则为请求的参数,@returns为接口返回的参数。
ProTable
使用dataSource传值时,需要配合request方法区请求数据,如果碰到时间类传参,会报一个错误Cannot read properties of undefined (reading '0'),该错误是因为本身不search时会自己设置该参数,但是参数并不存在(因为我们并没有进行筛选),解决方法为使用“&&”,示例如图:
![](https://i-blog.csdnimg.cn/blog_migrate/c25bcef9b9a813140da9afbec74ccd7a.png)
2.使用rowSelection时存在切换分页的情况,来回切换分页选择数据会丢失:增加一个参数“preserveSelectedRowKeys: true”
const rowSelection = {
preserveSelectedRowKeys: true,
selectedRowKeys,
onChange: onSelectChange,
};
3.使用Protable时,开启了rowSelection然后head层会多出一个所选信息的展示,如何隐藏tableAlertRender | alwaysShowAlert
<ProTable
rowSelection={rowSelection}
tableAlertRender={false}/> // 这行配置项开启即可隐藏头部
EditProTable
当使用可编辑表格时,valueType为valueType: 'treeSelect',设置数据源的方法:
![](https://i-blog.csdnimg.cn/blog_migrate/0a9c1dd70a591597fac898cfa430c50f.png)
antd(^5.0.0)
DatePicker日历组件存在中英文解决:
![](https://i-blog.csdnimg.cn/blog_migrate/4c57d8aaf7c86de02b0054f0b650a001.png)
ok看了官方文档以后发现就是locale的问题,开始从入口文件“app.tsx”开始解决,看到
![](https://i-blog.csdnimg.cn/blog_migrate/885c8ff67a5be452383ac00b7778be6f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/da8847e81f0bc0eab3c7e304457b291b.png)
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
然后再去页面内的组件中区测试,看有没有解决
![](https://i-blog.csdnimg.cn/blog_migrate/62cd73e09da7487b6f84180c631ab02e.gif)
如何下载文件
1.确定响应头-->后端返回的响应类型(如图)
![](https://i-blog.csdnimg.cn/blog_migrate/c8fdfa109f02b1f923c64b4a642c1c48.png)
在request中返回时设置它的response为blob格式,然后处理所返回的数据
![](https://i-blog.csdnimg.cn/blog_migrate/491f05d289ba7af8300128dd98bf6177.png)
以下是我的例子:
1.接口层面
![](https://i-blog.csdnimg.cn/blog_migrate/5d7b1fbf8ee0b08f10edb5acad432eae.png)
2.返回的数据层面
![](https://i-blog.csdnimg.cn/blog_migrate/8e12709b08dd408a2994edcb4685617b.png)
antd-moble
vscode设置类
代码块高亮设置,点击右下角齿轮(快捷键:Command+,|Ctrl+,)图标进入设置页面,找到Guides:Bracket Pairs(控制是否启用括号对指南)
![](https://i-blog.csdnimg.cn/blog_migrate/8257344f955001bc449f6df52b25c27e.png)
UMI4
设置右上角登录的用户名
首先确定app.tsx在src的目录下,然后在layout中书写rightContentRender,具体实现为(React.Node结构)
rightContentRender: () => {
return (
<div>
// 这行为展示的用户名
<span style={{ marginRight: '10px' }}> {admin && admin.name}</span>
// 这里为下拉框
<Dropdown menu={{ items }}>
<a onClick={(e) => e.preventDefault()}>
<Space>
{currentUser?.username}
<CaretDownOutlined />
</Space>
</a>
</Dropdown>
</div>
);
},
其余参数还在探索待更新