Skip to content

A
ant-design-pro-vue
Commit a3924093 by Sendya
Options

fix: keep-alive component

parent 021cfa0e
Showing with 38 additions and 296 deletions
README.md
......@@ -120,7 +120,7 @@ yarn run lint
----
- [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
- [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md)
- [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md) [@AraragiTsukihiz](https://github.com/araragitsukihiz)
- [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/load-on-demand.md)
- [为首屏增加 Loading 动画](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/add-page-loading-animate.md)
......
src/components/layouts/BasicLayout.vue
<template>
<global-layout>
<transition name="page-transition">
<keep-alive v-if="keepAlive">
<router-view />
</keep-alive>
<router-view v-else />
<route-view />
</transition>
</global-layout>
</template>
<script>
import RouteView from '@/components/layouts/RouteView'
import GlobalLayout from '@/components/page/GlobalLayout'
export default {
name: 'BasicLayout',
components: {
RouteView,
GlobalLayout
},
data () {
return {
}
},
computed: {
keepAlive () {
return this.$route.meta.keepAlive
return {}
}
},
methods: {
},
}
</script>
......
src/components/layouts/RouteView.vue
<template>
<keep-alive v-if="keepAlive">
<router-view />
</keep-alive>
<router-view v-else />
</template>
<script>
export default {
name: 'RouteView',
computed: {
keepAlive () {
return this.$route.meta.keepAlive
}
data () {
return {}
},
render () {
const { $route: { meta } } = this
const inKeep = (
<keep-alive>
<router-view />
</keep-alive>
)
const notKeep = (
<router-view />
)
return meta.keepAlive ? inKeep : notKeep
}
}
</script>
\ No newline at end of file
src/components/table/README.md
......@@ -9,6 +9,7 @@ Table 重封装组件说明
>
> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可
该 `table` 由 [@AraragiTsukihiz](https://github.com/araragitsukihiz) 完成封装
例子1
......
src/components/table/StandardTable.vue deleted 100644 → 0
<template>
<div class="standard-table">
<div class="alert">
<a-alert type="info" :show-icon="true">
<div slot="message">
已选择&nbsp;<a style="font-weight: 600">{{ selectedRows.length }}</a>&nbsp;&nbsp;
<template v-for="(item, index) in needTotalList" v-if="item.needTotal">
{{ item.title }} 总计&nbsp;
<a :key="index" style="font-weight: 600">
{{ item.customRender ? item.customRender(item.total) : item.total }}
</a>&nbsp;&nbsp;
</template>
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
</a-alert>
</div>
<a-table
:size="size"
:bordered="bordered"
:loading="loading"
:columns="columns"
:dataSource="current"
:rowKey="rowKey"
:pagination="pagination"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: updateSelect }"
>
</a-table>
</div>
</template>
<script>
export default {
name: 'StandardTable',
// props: ['bordered', 'loading', 'columns', 'data', 'rowKey', 'pagination', 'selectedRows'],
props: {
/**
* 数据加载函数，返回值必须是 Promise
* 默认情况下必须传递 data 参数；
* 如果使用本地数据渲染表格，业务代码中将获取本地数据包装为 Promise 即可。
*
* currentData 用于向外暴露表格当前渲染的数据，
* 业务开发中也可以直接修改 currentData，从而重新渲染表格（仅推荐用于客户端排序、数据过滤等场景）
*/
data: {
type: Function,
required: true
},
dataSource: {
type: Array,
default () {
return []
}
},
columns: {
type: Array,
required: true
},
/* pagination: {
type: Object,
default () {
return {}
}
},*/
pageSize: {
type: Number,
default: 10
},
pageNum: {
type: Number,
default: 1
},
pageSizeOptions: {
type: Array,
default () {
return ['10', '20', '30', '40', '50']
}
},
responseParamsName: {
type: Object,
default () {
return {}
}
},
bordered: {
type: Boolean,
default: false
},
/**
* 表格大小风格，default, middle, small
*/
size: {
type: String,
default: 'default'
},
rowKey: {
type: String,
default: ''
},
selectedRows: {
type: Array,
default: null
}
},
data () {
return {
needTotalList: [],
selectedRowKeys: [],
loading: true,
total: 0,
pageNumber: this.pageNum,
currentPageSize: this.pageSize,
defaultCurrent: 1,
sortParams: {},
current: [],
pagination: {},
paramsName: {},
}
},
created () {
//数据请求参数配置
this.paramsName = Object.assign(
{},
{
pageNumber: 'pageNo',
pageSize: 'pageSize',
total: 'totalCount',
results: 'data',
sortColumns: 'sortColumns'
},
this.responseParamsName
)
this.needTotalList = this.initTotalList(this.columns)
// load data
this.loadData( { pageNum: this.pageNumber } )
},
methods: {
updateSelect (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
const list = this.needTotalList
this.needTotalList = list.map(item => {
return {
...item,
total: selectedRows.reduce((sum, val) => {
return sum + val[item.dataIndex]
}, 0)
}
})
this.$emit('change', selectedRowKeys, selectedRows)
},
initTotalList (columns) {
const totalList = []
columns.forEach(column => {
if (column.needTotal) {
totalList.push({ ...column, total: 0 })
}
})
return totalList
},
loadData (params) {
const that = this
that.loading = true
params = Object.assign({}, params)
const remoteParams = Object.assign({}, that.sortParams)
remoteParams[that.paramsName.pageNumber] = params.pageNum || that.pageNumber
remoteParams[that.paramsName.pageSize] = params.pageSize || that.currentPageSize
if (params.pageNum) {
that.pageNumber = params.pageNum
}
if (params.pageSize) {
that.currentPageSize = params.pageSize
}
const dataPromise = that.data(remoteParams)
dataPromise.then( response => {
if (!response) {
that.loading = false
return
}
let results = response[that.paramsName.results]
results = (results instanceof Array && results) || []
that.current = results
that.$emit('update:currentData', that.current.slice())
that.$emit('dataloaded', that.current.slice())
that.total = response[that.paramsName.total] * 1
that.pagination = that.pager()
that.loading = false
}, () => {
// error callback
that.loading = false
})
},
// eslint-disable-next-line
onPagerChange (page, pageSize) {
this.pageNumber = page
this.loadData({ pageNum: page })
},
onPagerSizeChange (current, size) {
this.currentPageSize = size
/*
if (current === this.pageNumber) this.loadData()
console.log('page-size-change', current, size)
*/
},
onClearSelected () {
this.selectedRowKeys = []
this.updateSelect([], [])
},
pager () {
return {
total: this.total,
showTotal: total => `共有 ${total} 条`,
showSizeChanger: true,
pageSizeOptions: this.pageSizeOptions,
pageSize: this.pageSize,
defaultCurrent: this.defaultCurrent,
onChange: this.onPagerChange,
onShowSizeChange: this.onPagerSizeChange
}
}
},
watch: {
'selectedRows': function (selectedRows) {
this.needTotalList = this.needTotalList.map(item => {
return {
...item,
total: selectedRows.reduce( (sum, val) => {
return sum + val[item.dataIndex]
}, 0)
}
})
}
}
}
</script>
<style scoped>
.alert {
margin-bottom: 16px;
}
</style>
\ No newline at end of file
src/config/router.config.js
......@@ -16,26 +16,26 @@ export const asyncRouterMap = [
name: 'dashboard',
redirect: '/dashboard/workplace',
component: RouteView,
meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
meta: { title: '仪表盘', keepAlive: true, icon: 'dashboard', permission: [ 'dashboard' ] },
children: [
{
path: '/dashboard/analysis',
name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'),
meta: { title: '分析页', permission: [ 'dashboard' ] }
meta: { title: '分析页', keepAlive: true, permission: [ 'dashboard' ] }
},
{
path: '/dashboard/monitor',
name: 'Monitor',
hidden: true,
component: () => import('@/views/dashboard/Monitor'),
meta: { title: '监控页', permission: [ 'dashboard' ] }
meta: { title: '监控页', keepAlive: true, permission: [ 'dashboard' ] }
},
{
path: '/dashboard/workplace',
name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', permission: [ 'dashboard' ] }
meta: { title: '工作台', keepAlive: true, permission: [ 'dashboard' ] }
}
]
},
......@@ -51,19 +51,19 @@ export const asyncRouterMap = [
path: '/form/base-form',
name: 'BaseForm',
component: () => import('@/views/form/BasicForm'),
meta: { title: '基础表单', permission: [ 'form' ] }
meta: { title: '基础表单', keepAlive: true, permission: [ 'form' ] }
},
{
path: '/form/step-form',
name: 'StepForm',
component: () => import('@/views/form/stepForm/StepForm'),
meta: { title: '分步表单', permission: [ 'form' ] }
meta: { title: '分步表单', keepAlive: true, permission: [ 'form' ] }
},
{
path: '/form/advanced-form',
name: 'AdvanceForm',
component: () => import('@/views/form/advancedForm/AdvancedForm'),
meta: { title: '高级表单', permission: [ 'form' ] }
meta: { title: '高级表单', keepAlive: true, permission: [ 'form' ] }
}
]
},
......@@ -80,56 +80,56 @@ export const asyncRouterMap = [
path: '/list/query-list',
name: 'QueryList',
component: () => import('@/views/list/TableList'),
meta: { title: '查询表格', permission: [ 'table' ] }
meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/edit-table',
name: 'EditList',
component: () => import('@/views/list/TableInnerEditList'),
meta: { title: '内联编辑表格', permission: [ 'table' ] }
meta: { title: '内联编辑表格', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/user-list',
name: 'UserList',
component: () => import('@/views/list/UserList'),
meta: { title: '用户列表', permission: [ 'table' ] }
meta: { title: '用户列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/role-list',
name: 'RoleList',
component: () => import('@/views/list/RoleList'),
meta: { title: '角色列表', permission: [ 'table' ] }
meta: { title: '角色列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/system-role',
name: 'SystemRole',
component: () => import('@/views/role/RoleList'),
meta: { title: '角色列表2', permission: [ 'table' ]}
meta: { title: '角色列表2', keepAlive: true, permission: [ 'table' ]}
},
{
path: '/list/permission-list',
name: 'PermissionList',
component: () => import('@/views/list/PermissionList'),
meta: { title: '权限列表', permission: [ 'table' ] }
meta: { title: '权限列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/basic-list',
name: 'BasicList',
component: () => import('@/views/list/StandardList'),
meta: { title: '标准列表', permission: [ 'table' ] }
meta: { title: '标准列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/card',
name: 'CardList',
component: () => import('@/views/list/CardList'),
meta: { title: '卡片列表', permission: [ 'table' ] }
meta: { title: '卡片列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/search',
name: 'SearchList',
component: () => import('@/views/list/search/SearchLayout'),
redirect: '/list/search/article',
meta: { title: '搜索列表', permission: [ 'table' ] },
meta: { title: '搜索列表', keepAlive: true, permission: [ 'table' ] },
children: [
{
path: '/list/search/article',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment