Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
dyingstraw
vue-element-admin
提交
df23405b
V
vue-element-admin
项目概览
dyingstraw
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
df23405b
编写于
10月 17, 2018
作者:
花
花裤衩
提交者:
GitHub
10月 17, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feature: add pagination component (#1213)
上级
f94aa1ac
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
158 addition
and
38 deletion
+158
-38
src/components/Pagination/index.vue
src/components/Pagination/index.vue
+99
-0
src/utils/index.js
src/utils/index.js
+0
-11
src/utils/scrollTo.js
src/utils/scrollTo.js
+50
-0
src/views/example/list.vue
src/views/example/list.vue
+3
-11
src/views/table/complexTable.vue
src/views/table/complexTable.vue
+6
-16
未找到文件。
src/components/Pagination/index.vue
0 → 100644
浏览文件 @
df23405b
<
template
>
<div
:class=
"
{'hidden':hidden}" class="pagination-container">
<el-pagination
:background=
"background"
:current-page.sync=
"currentPage"
:page-size.sync=
"pageSize"
:layout=
"layout"
:total=
"total"
v-bind=
"$attrs"
@
size-change=
"handleSizeChange"
@
current-change=
"handleCurrentChange"
/>
</div>
</
template
>
<
script
>
import
{
scrollTo
}
from
'
@/utils/scrollTo
'
export
default
{
name
:
'
Pagination
'
,
props
:
{
total
:
{
required
:
true
,
type
:
Number
},
page
:
{
type
:
Number
,
default
:
1
},
limit
:
{
type
:
Number
,
default
:
20
},
pageSizes
:
{
type
:
Array
,
default
()
{
return
[
10
,
20
,
30
,
50
]
}
},
layout
:
{
type
:
String
,
default
:
'
total, sizes, prev, pager, next, jumper
'
},
background
:
{
type
:
Boolean
,
default
:
true
},
autoScroll
:
{
type
:
Boolean
,
default
:
true
},
hidden
:
{
type
:
Boolean
,
default
:
false
}
},
computed
:
{
currentPage
:
{
get
()
{
return
this
.
page
},
set
(
val
)
{
this
.
$emit
(
'
update:page
'
,
val
)
}
},
pageSize
:
{
get
()
{
return
this
.
limit
},
set
(
val
)
{
this
.
$emit
(
'
update:limit
'
,
val
)
}
}
},
methods
:
{
handleSizeChange
(
val
)
{
this
.
$emit
(
'
pagination
'
,
{
page
:
this
.
currentPage
,
limit
:
val
})
if
(
this
.
autoScroll
)
{
scrollTo
(
0
,
800
)
}
},
handleCurrentChange
(
val
)
{
this
.
$emit
(
'
pagination
'
,
{
page
:
val
,
limit
:
this
.
pageSize
})
if
(
this
.
autoScroll
)
{
scrollTo
(
0
,
800
)
}
}
}
}
</
script
>
<
style
scoped
>
.pagination-container
{
background
:
#fff
;
padding
:
32px
16px
;
}
.pagination-container.hidden
{
display
:
none
;
}
</
style
>
src/utils/index.js
浏览文件 @
df23405b
...
...
@@ -164,17 +164,6 @@ export function objectMerge(target, source) {
return
target
}
export
function
scrollTo
(
element
,
to
,
duration
)
{
if
(
duration
<=
0
)
return
const
difference
=
to
-
element
.
scrollTop
const
perTick
=
(
difference
/
duration
)
*
10
setTimeout
(()
=>
{
element
.
scrollTop
=
element
.
scrollTop
+
perTick
if
(
element
.
scrollTop
===
to
)
return
scrollTo
(
element
,
to
,
duration
-
10
)
},
10
)
}
export
function
toggleClass
(
element
,
className
)
{
if
(
!
element
||
!
className
)
{
return
...
...
src/utils/scrollTo.js
0 → 100644
浏览文件 @
df23405b
Math
.
easeInOutQuad
=
function
(
t
,
b
,
c
,
d
)
{
t
/=
d
/
2
if
(
t
<
1
)
{
return
c
/
2
*
t
*
t
+
b
}
t
--
return
-
c
/
2
*
(
t
*
(
t
-
2
)
-
1
)
+
b
}
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var
requestAnimFrame
=
(
function
()
{
return
window
.
requestAnimationFrame
||
window
.
webkitRequestAnimationFrame
||
window
.
mozRequestAnimationFrame
||
function
(
callback
)
{
window
.
setTimeout
(
callback
,
1000
/
60
)
}
})()
// because it's so fucking difficult to detect the scrolling element, just move them all
function
move
(
amount
)
{
document
.
documentElement
.
scrollTop
=
amount
document
.
body
.
parentNode
.
scrollTop
=
amount
document
.
body
.
scrollTop
=
amount
}
function
position
()
{
return
document
.
documentElement
.
scrollTop
||
document
.
body
.
parentNode
.
scrollTop
||
document
.
body
.
scrollTop
}
export
function
scrollTo
(
to
,
duration
,
callback
)
{
const
start
=
position
()
const
change
=
to
-
start
const
increment
=
20
let
currentTime
=
0
duration
=
(
typeof
(
duration
)
===
'
undefined
'
)
?
500
:
duration
var
animateScroll
=
function
()
{
// increment the time
currentTime
+=
increment
// find the value with the quadratic in-out easing function
var
val
=
Math
.
easeInOutQuad
(
currentTime
,
start
,
change
,
duration
)
// move the document.body
move
(
val
)
// do the animation unless its over
if
(
currentTime
<
duration
)
{
requestAnimFrame
(
animateScroll
)
}
else
{
if
(
callback
&&
typeof
(
callback
)
===
'
function
'
)
{
// the animation is done so lets callback
callback
()
}
}
}
animateScroll
()
}
src/views/example/list.vue
浏览文件 @
df23405b
...
...
@@ -50,26 +50,18 @@
<
/el-table-column
>
<
/el-table
>
<
div
class
=
"
pagination-container
"
>
<
el
-
pagination
:
current
-
page
=
"
listQuery.page
"
:
page
-
sizes
=
"
[10,20,30, 50]
"
:
page
-
size
=
"
listQuery.limit
"
:
total
=
"
total
"
background
layout
=
"
total, sizes, prev, pager, next, jumper
"
@
size
-
change
=
"
handleSizeChange
"
@
current
-
change
=
"
handleCurrentChange
"
/>
<
/div
>
<
pagination
v
-
show
=
"
total>0
"
:
total
=
"
total
"
:
page
.
sync
=
"
listQuery.page
"
:
limit
.
sync
=
"
listQuery.limit
"
@
pagination
=
"
getList
"
/>
<
/div
>
<
/template
>
<
script
>
import
{
fetchList
}
from
'
@/api/article
'
import
Pagination
from
'
@/components/Pagination
'
// Secondary package based on el-pagination
export
default
{
name
:
'
ArticleList
'
,
components
:
{
Pagination
}
,
filters
:
{
statusFilter
(
status
)
{
const
statusMap
=
{
...
...
src/views/table/complexTable.vue
浏览文件 @
df23405b
...
...
@@ -80,9 +80,7 @@
<
/el-table-column
>
<
/el-table
>
<
div
class
=
"
pagination-container
"
>
<
el
-
pagination
v
-
show
=
"
total>0
"
:
current
-
page
=
"
listQuery.page
"
:
page
-
sizes
=
"
[10,20,30, 50]
"
:
page
-
size
=
"
listQuery.limit
"
:
total
=
"
total
"
background
layout
=
"
total, sizes, prev, pager, next, jumper
"
@
size
-
change
=
"
handleSizeChange
"
@
current
-
change
=
"
handleCurrentChange
"
/>
<
/div
>
<
pagination
v
-
show
=
"
total>0
"
:
total
=
"
total
"
:
page
.
sync
=
"
listQuery.page
"
:
limit
.
sync
=
"
listQuery.limit
"
@
pagination
=
"
getList
"
/>
<
el
-
dialog
:
title
=
"
textMap[dialogStatus]
"
:
visible
.
sync
=
"
dialogFormVisible
"
>
<
el
-
form
ref
=
"
dataForm
"
:
rules
=
"
rules
"
:
model
=
"
temp
"
label
-
position
=
"
left
"
label
-
width
=
"
70px
"
style
=
"
width: 400px; margin-left:50px;
"
>
...
...
@@ -130,8 +128,9 @@
<
script
>
import
{
fetchList
,
fetchPv
,
createArticle
,
updateArticle
}
from
'
@/api/article
'
import
waves
from
'
@/directive/waves
'
//
水波纹指令
import
waves
from
'
@/directive/waves
'
//
Waves directive
import
{
parseTime
}
from
'
@/utils
'
import
Pagination
from
'
@/components/Pagination
'
// Secondary package based on el-pagination
const
calendarTypeOptions
=
[
{
key
:
'
CN
'
,
display_name
:
'
China
'
}
,
...
...
@@ -148,9 +147,8 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
export
default
{
name
:
'
ComplexTable
'
,
directives
:
{
waves
}
,
components
:
{
Pagination
}
,
directives
:
{
waves
}
,
filters
:
{
statusFilter
(
status
)
{
const
statusMap
=
{
...
...
@@ -168,7 +166,7 @@ export default {
return
{
tableKey
:
0
,
list
:
null
,
total
:
null
,
total
:
0
,
listLoading
:
true
,
listQuery
:
{
page
:
1
,
...
...
@@ -228,14 +226,6 @@ export default {
this
.
listQuery
.
page
=
1
this
.
getList
()
}
,
handleSizeChange
(
val
)
{
this
.
listQuery
.
limit
=
val
this
.
getList
()
}
,
handleCurrentChange
(
val
)
{
this
.
listQuery
.
page
=
val
this
.
getList
()
}
,
handleModifyStatus
(
row
,
status
)
{
this
.
$message
({
message
:
'
操作成功
'
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录