antd pro问题记录

本文详细解析了DVA框架中history模块的正确使用方法,避免常见错误;介绍了ProTable组件如何格式化远程数据,实现高效数据展示;并分享了项目打包部署中遇到的404问题解决方案,包括配置hashHistory及publicPath的调整技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 报错:devScripts.js:5836 Warning: Please use require("history").createHashHistory instead of require("history/createHashHistory"). Support for the latter will be removed in the next major release.
    解决:node_modules=>dva包=>lib文件夹=>index.js
// var _createHashHistory = _interopRequireDefault(require("history/createHashHistory"));
var _createHashHistory = _interopRequireDefault(require("history").createHashHistory);

2.Pro-table获取远程数据时格式化数据

        request={
          (params: any) => searchProductObjectDomain(params.productName).then(res => {
            const result = {
              data: res.list.map((item:any,i:any) => {
                return {
                  ...item,
                  key: i.toString(),
                }
              }),
            }
            return result
          })
        }

备注:Pro-table request需要的数据格式为

{
	data: dataSource,
    total: total,
    success: true,
    pageSize:pageSize,
    current: parseInt(`${params.currentPage}`, 10) || 1,
}

3.POST GET请求

export async function getProductObjectByTypeDomain(productTypeUid: any) {
  let params = {
    productTypeUid: productTypeUid
  }
  let url = API_URL + 'getProductObjectByTypeDomain'
  return request(`${url}?${stringify(params)}`, {
    method: 'GET',
  });
}

GET请求时GET可省略

export async function getProductObjectByTypeDomain(productTypeUid: any) {
  let params = {
    productTypeUid: productTypeUid
  }
  let url = API_URL + 'getProductObjectByTypeDomain'
  return request(`${url}?${stringify(params)}`);
}

POST请求

export async function addProductObjectDomain(productObjectRequest: any) {
    let url = API_URL + 'addProductObjectDomain'
    return request(url, {
        method: 'POST',
        data: productObjectRequest
    });
}

4.项目打包
npm run build后刷新后 404
在这里插入图片描述
解决:改用 hashHistory,在config.ts 里配置hashHistory 官网方案

export default defineConfig({
  history: {type:'hash'},// 默认是 browser
  ……
  })

npm run build 静态资源404

export default defineConfig({
  publicPath: './' ,  //定义资源的基本路径
  ……
  })

ProTable之columns

属性名是否必选类型使用备注
indexNnumber--
renderN-在这里插入图片描述自定义 render
renderTextN-在这里插入图片描述自定义 render,但是需要返回 string
renderFormItemN-在这里插入图片描述自定义搜索 form 的输入在这里插入图片描述
formItemPropsN--搜索表单的 props
initialValueany--搜索表单的默认值
ellipsisNboolean-是否缩略
copyableNboolean-是否拷贝
valueTypeNProColumnsValueType在这里插入图片描述-值的类型
valueEnumN-在这里插入图片描述值的枚举,如果存在枚举,Search 中会生成 select
hideInSearchNboolean-在查询表单中隐藏
hideInTableNboolean-在 table 中隐藏
hideInFormNboolean-在新建表单中删除
orderNnumber-form 的排序

左侧菜单栏固定
DefaultSettings.ts中将 fixSiderbar改为true

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值