ant-design-vue pro怎样添加一个新的列表

step1.

src\config\router.config.js文件里添加path

 {path: '/runAnalysis',name: '运行分析',component: RouteView,redirect: '/runAnalysis/healthAnalysis',meta: { title: '运行分析', icon: 'file-search' },children: [{path: '/runAnalysis/healthAnalysis',name: '健康分析',component: () => import(/* webpackChunkName: "result" */ '@/views/runAnalysis/healthAnalysis'),meta: { title: '健康分析', keepAlive: true, hiddenHeaderContent: true }},{path: '/runAnalysis/lifeLossAnalysis',name: '寿命损耗分析',component: () => import(/* webpackChunkName: "result" */ '@/views/runAnalysis/lifeLossAnalysis'),meta: { title: '寿命损耗分析', keepAlive: true, hiddenHeaderContent: true }},{path: '/runAnalysis/healthReport',name: '健康报表',component: () => import(/* webpackChunkName: "result" */ '@/views/runAnalysis/healthReport'),meta: { title: '健康报表', keepAlive: true, hiddenHeaderContent: true }}]}

step2.

新建views/runAnalysis/healthAnalysis.vue,内容从views\list\TableList.vue复制（具体内容自己改），修改下图的方法名

改为src\api\manage.js对应接收请求的方法名

step3.

src/mock/services/manage.js里添加

const healthAnalysis = (options) => {// options:{url: "/api/healthAnalysis?pageNo=1&pageSize=10", type: "GET", body: null}const parameters = getQueryParameters(options)const result = []const pageNo = parseInt(parameters.pageNo)const pageSize = parseInt(parameters.pageSize)const totalPage = Math.ceil(totalCount / pageSize)const key = (pageNo - 1) * pageSizeconst next = (pageNo >= totalPage ? (totalCount % pageSize) : pageSize) + 1for (let i = 1; i < next; i++) {const tmpKey = key + iresult.push({key: tmpKey,id: tmpKey,no: 'No ' + tmpKey,description: '这是一段描述',callNo: Mock.mock('@integer(1, 999)'),status: Mock.mock('@integer(0, 3)'),updatedAt: Mock.mock('@datetime'),editable: false})}return builder({pageSize: pageSize,pageNo: pageNo,totalCount: totalCount,totalPage: totalPage,data: result})
}

和

Mock.mock(/\/healthAnalysis/, 'get', healthAnalysis)

step4.

src/api/manage.js里
在const api里添加

healthAnalysis: '/healthAnalysis',

再添加

export function healthAnalysis (parameter) {return request({url: api.healthAnalysis,method: 'get',params: parameter})
}

step5.

复制src\views\list\modules到views/runAnalysis目录（列表需要用到）

踩坑

Q：项目再次启动报错’vue-cli-service’ 不是内部或外部命令，也不是可运行的程序
A：删除项目文件夹下的node_modules，项目路径下运行yarn install(用cnpm install不行)，然后npm run serve.

ant-design-vue pro怎样添加一个新的列表相关推荐

vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
ant design vue pro 支持多页签模式页签可以缓存
ant design vue pro 支持多页签模式页签可以缓存代码贴在最后启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
[vue] 动态给vue的data添加一个新的属性时会发生什么？怎样解决？
[vue] 动态给vue的data添加一个新的属性时会发生什么?怎样解决? 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如果想要使添加的值做到响应式,应当使用$set()来添加对象. ...
Ant Design Vue Pro（V3.0.0 ）MultiTab标签缓存，完美解决
使用Ant Design Vue Pro 基础框架都知道好用,但是MultiTab标签一直未解决(V3.0.0),最新版解决了但是要收费9K(2022-01-21日). 首先需要实现如下: Multi ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
Ant design vue pro 添加多页签
1.修改模板 /src/layouts/BasicLayout.vue 添加如下代码第一处: <a-layout-content :s ...
ant design vue 当中的表格自定义结构超出隐藏的自适应动态显示省略号
前言我们知道,在ant design vue当中的table组件里面的列表项目,我们一般会使用columns属性定义列表项目,比如下面 export const columns = [{title: ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...