Spring Could+Ant Design Pro表格数据加载

由于公司最近项目使用Ant Design Pro，所以就学习了一下，以前公司使用的是easyui，所以这也是我的第一次学习尝试，记录一下，有不足大家帮忙指正。
后台是Spring Could，使用Nacos作为服务注册中心注册。

表格加载

打开Ant Design Pro项目
修改配置，解决跨域问题，让它能连接到我们的项目的网关
修改vue.config.js
找到节点devServer，修改如下：

devServer: {// development server port 8000port: 8000,open: true, //是否自动弹出浏览器页面proxy: {'/': {target: 'http://localhost:9014/', //API服务器的地址（spring could网关端口号）ws: false,  //代理websocketschangeOrigin: true, // 虚拟的站点需要更管originpathRewrite: {   //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc''^/': ''}}},},

为了不影响其他演示的页面，我们在 src/utils下新增一个springRequest.js,基本上是复制了request.js,我们只是对其做了一点点的修改，修改baseURL，让它连接到我们的网关中

import axios from 'axios'
import store from '@/store'
import {VueAxios
} from './axios'
import notification from 'ant-design-vue/es/notification'
// import {//   ACCESS_TOKEN
// } from '@/store/mutation-types'// 创建 axios 实例
const request = axios.create({// API 请求的默认前缀baseURL: '/',timeout: 6000 // 请求超时时间
})// 异常拦截处理器
const err = (error) => {if (error.response) {const data = error.response.dataconst token = localStorage.getItem('token')if (error.response.status === 403) {notification.error({message: 'Forbidden',description: data.message})}if (error.response.status === 401 && !(data.result && data.result.isLogin)) {notification.error({message: 'Unauthorized',description: 'Authorization verification failed'})if (token) {store.dispatch('Logout').then(() => {setTimeout(() => {window.location.reload()}, 1500)})}}}return Promise.reject(error)
}// request interceptor
request.interceptors.request.use(config => {const token = localStorage.getItem('token')if (token) {config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改}return config
}, err)// response interceptor
request.interceptors.response.use((response) => {return response.data
}, err)const installer = {vm: {},install (Vue) {Vue.use(VueAxios, request)}
}export default requestexport {installer as VueAxios,request as axios
}

在我们的src/api文件夹中，新增bizConfig.js文件
让它访问我们的网关

import { axios } from '@/utils/springRequest'
const api = {tbInspectFileList: '/api/TbInspectFileController/tbInspectFile/list',get_type_name: '/api/TbInspectFileController/tbInspectFile/getTypeName'
}
export default api
//表格
export function tbInspectFileList (param) {return axios({url: api.tbInspectFileList,method: 'post',params: param})
},
//下拉框
export function getTypeName () {return axios({url: api.get_type_name,method: 'post'})
}

在src/views下，新增bizConfig文件，新增Search_Value_Set.vue

<template><a-card :bordered="false"><div class="table-page-search-wrapper"><a-form layout="inline"><a-row><a-col :md="10" :sm="24"><a-form-itemlabel="名称"><!--              <a-input v-model="queryParam.typeName" placeholder=""/>--><a-select showSearch v-model="queryParam.typeName"><a-select-option v-for="d in templateDatas" :key="d.value" :value="d.value">{{ d.text }}</a-select-option></a-select></a-form-item><a-form-itemlabel="别名"><a-input v-model="queryParam.typeAlias" placeholder=""/></a-form-item></a-col><a-col :md="10" :sm="24"><a-form-itemlabel="上传人"><a-input v-model="queryParam.typeValue" placeholder=""/></a-form-item><a-form-itemlabel="类型"><a-select v-model="queryParam.enabled" default-Value="2" placeholder="请选择"><a-select-option value="2">视频</a-select-option><a-select-option value="1">图片</a-select-option></a-select></a-form-item></a-col><a-col :md="10" :sm="24"><div class="table-operator" ></div></a-col><a-col :md="10" :sm="24"><span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' } || {} "><a-button type="primary" icon="plus" :style="{'margin-right':'20px'}" @click="$refs.createModal.add(templateDatas)">新建</a-button><a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button></span></a-col></a-row></a-form></div><s-tableref="table"size="default"rowKey="id":columns="columns":data="loadData"hideOnSinglePage="false"showPagination="auto"><template slot="operation" slot-scope="text, record"><span><a-divider type="vertical"/><a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)"><a>删除</a></a-popconfirm></span></template></s-table><create-form ref="createModal" @ok="handleOk"/></a-card>
</template><script>import { STable, Ellipsis } from '@/components'import CreateForm from './modules/CreateForm'import { tbInspectFileList, getTypeName } from '@/api/bizConfig'export default {name: 'SearchValueSet',components: {STable,Ellipsis,CreateForm},data () {return {mdl: {},// 查询参数queryParam: {},// 表头columns: [{title: '行号',// scopedSlots: { customRender: 'serial' }width: 80,// customRender: (text, record, index) => `${index + 1}`customRender: function (text, record, index) {return index + 1}},{title: '主键',dataIndex: 'id'},{title: '此次记录所对应的工单编号',dataIndex: 'orderCode'},{title: '图片或视频存储的路径信息',dataIndex: 'filePath'},{title: '类型',dataIndex: 'fileExtType',customRender: function (text) {if (text === 1){ //eslint-disable-linereturn '图片'} else {return '视频'}}},{title: '上传人',dataIndex: 'uploadUser'},{title: '操作',key: 'action',scopedSlots: { customRender: 'operation' }}],// 加载数据方法 必须为 Promise 对象loadData: parameter => {return tbInspectFileList(Object.assign(parameter, this.queryParam)).then(res => {return res.result})},optionAlertShow: true,templateDatas: []}},filters: {// enabledFilter (type) {//   return enabledMap[type].text// },// enabledValueFilter (type) {//   return enabledMap[type].enabled// }},created () {this.fetchTypeNameData()// this.queryParam.enabled = '2'// getRoleList({ t: new Date() })},methods: {//加载下拉框fetchTypeNameData () {getTypeName().then((res) => {const result = res.resultresult.forEach((r) => {this.templateDatas.push({value: r.orderCode,text: r.id})})})}}}
</script><style scoped></style>

到这一步就算写完了，新增菜单的方法可以在网上找。本来在我本地还做了增删改查的方法，但在本文中我给删掉了，下面是效果：

后台传入数据

分页效果也可以自己改，在components/Table/index.js中159行，可以全局修改，如下所示：

result.then(r => {this.localPagination = Object.assign({}, this.localPagination, {current: r.pageNo, // 返回结果中的当前分页数total: r.totalCount, // 返回结果中的总记录数showSizeChanger: this.showSizeChanger,pageSize: (pagination && pagination.pageSize) ||this.localPagination.pageSize})// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页if (r.data.length === 0 && this.localPagination.current !== 1) {this.localPagination.current--this.loadData()return}// 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false// 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能(!this.showPagination || !r.totalCount && this.showPagination === 'auto') && (this.localPagination = false)this.localDataSource = r.data // 返回结果中的数组数据this.localLoading = false})

Spring Could+Ant Design Pro表格数据加载相关推荐

design php 如何使用ant_Ant Design Pro如何调用接口 | Ant Design Pro渲染数据绑定数据...
Ant Design Pro如何调用接口 | Ant Design Pro渲染数据绑定数据 Ant Design Pro我发现网上的资料好少,而且版本基本都是1.0的,我现在是2.0版本,好多地方都 ...
ant design pro表格分页
需要用到表格的配置项pagination pagination={{ showQuickJumper:true, showTotal:function(total, range){ return( ' ...
Ant Design Vue 表格数据按树型展示
/*** 使用递归将数组转为树形结构* 父ID属性为parent*/public static array2Tree (array: any, parentId: number) {if (Tool. ...
前端UI框架Ant Design Pro
一直忙于工作,也没时间总结.现在有点零散时间把之前做的笔记整理一下. 目前项目使用的技术栈是,前端UI框架Ant Design Pro,数据交互使用react,后端使用的是springcloud,离线 ...
ant design pro 页面加载原理及过程，@connect 装饰器
一.概述以列表页中的标准列表为主 Ant Design Pro 默认通过只需浏览器单方面就可处理的 HashHistory 来完成路由.如果要切换为 BrowserHistory,那在 src/in ...
ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...
Ant Design Pro使用之--EditableProTable 可编辑表格
前言--EditableProTable 与 ProTable的对比首先:可编辑表格 EditableProTable 与 ProTable 的功能基本相同: 但是如果用ProTable的话,增和改 ...
ant design pro 加载慢_ant design pro项目打包后页面加载缓慢
用ant design pro框架做的项目,打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImp ...
服务器返回的响应数据无效,Ant Design Pro 5 网络请求和错误处理
Ant Design Pro 5 的网络请求有点复杂,只看文档不阅读源码搞不清楚到底发生了什么事情.涉及到fetch umi-request @umijs/plugin-request Ant Des ...
Ant Design Pro初探
Ant Design Pro 浅析脚手架下载 Ant Design Pro 浅析菜单映射页面渲染界面定义数据交互后台数据交互脚手架下载软件环境:NodeJS,Git 下载步骤: 1.cl ...

Spring Could+Ant Design Pro表格数据加载

表格加载

Spring Could+Ant Design Pro表格数据加载相关推荐

最新文章

热门文章