Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
MonkeyB_B
vue-element-admin
提交
3e3819ca
V
vue-element-admin
项目概览
MonkeyB_B
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
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,体验更适合开发者的 AI 搜索 >>
提交
3e3819ca
编写于
4月 23, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refine table example demo
上级
6d9ddadc
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
74 addition
and
87 deletion
+74
-87
src/api/article_table.js
src/api/article_table.js
+6
-37
src/mock/article_table.js
src/mock/article_table.js
+29
-27
src/mock/index.js
src/mock/index.js
+1
-0
src/views/example/table.vue
src/views/example/table.vue
+38
-23
未找到文件。
src/api/article_table.js
浏览文件 @
3e3819ca
import
{
fetch
}
from
'
utils/fetch
'
;
import
{
param
}
from
'
utils
'
;
// export function calendarsList(query) {
// return fetch({
// url: '/finfo/calendars?' + param(query),
// method: 'get'
// });
// }
export
function
fetchList
(
query
)
{
return
fetch
({
url
:
'
/article_table/list
'
,
method
:
'
get
'
});
}
export
function
calendarCreate
(
data
)
{
return
fetch
({
url
:
'
/finfo/calendar/create
'
,
method
:
'
post
'
,
data
});
}
export
function
calendarDelete
(
id
)
{
return
fetch
({
url
:
'
/finfo/calendar/delete
'
,
method
:
'
post
'
,
data
:
{
id
}
});
}
export
function
calendarUpdate
(
data
)
{
return
fetch
({
url
:
'
/finfo/calendar/update
'
,
method
:
'
post
'
,
data
method
:
'
get
'
,
params
:
query
});
}
export
function
calcountriesList
(
)
{
export
function
fetchPv
(
pv
)
{
return
fetch
({
url
:
'
/finfo/calcountries
'
,
method
:
'
get
'
url
:
'
/article_table/pv
'
,
method
:
'
get
'
,
params
:
{
pv
}
});
}
src/mock/article_table.js
浏览文件 @
3e3819ca
...
...
@@ -2,7 +2,7 @@ import Mock from 'mockjs';
const
List
=
[];
const
count
=
5
0
;
const
count
=
10
0
;
for
(
let
i
=
0
;
i
<
count
;
i
++
)
{
List
.
push
(
Mock
.
mock
({
...
...
@@ -12,34 +12,36 @@ for (let i = 0; i < count; i++) {
title
:
'
@ctitle(10, 20)
'
,
forecast
:
'
@float(0, 100, 2, 2)
'
,
importance
:
'
@integer(1, 3)
'
,
'
calendar_type|1
'
:
[
'
FD
'
,
'
FE
'
,
'
BI
'
,
'
VN
'
],
'
status|1
'
:
[
'
published
'
,
'
draft
'
,
'
deleted
'
]
'
type|1
'
:
[
'
FD
'
,
'
FE
'
,
'
BI
'
,
'
VN
'
],
'
status|1
'
:
[
'
published
'
,
'
draft
'
,
'
deleted
'
],
pageviews
:
'
@integer(300, 5000)
'
}));
}
export
default
{
getList
:
config
=>
// let {page, sortWay, startTime, endTime, userName, age} = config.params;
// let mockUsers = _Users.filter(user => {
// if (startTime && user.date < startTime) return false;
// if (endTime && user.date > endTime) return false;
// if (userName && user.name !== userName) return false;
// if (age && user.age !== age) return false;
// return true;
// });
// if (sortWay) {
// let {order, prop} = sortWay;
// mockUsers = mockUsers.sort((u1, u2) => order === 'ascending' ? u1[prop] - u2[prop] : u2[prop] - u1[prop]);
// }
// if (page === 0) page++;
// mockUsers = mockUsers.filter((u, index) => index < 20 * page && index >= 20 * (page - 1));
new
Promise
(
resolve
=>
{
setTimeout
(()
=>
{
resolve
([
200
,
{
total
:
List
.
length
,
items
:
List
}]);
},
100
);
})
getList
:
config
=>
{
const
{
importance
,
type
,
title
,
page
,
limit
}
=
config
.
params
;
const
mockList
=
List
.
filter
(
item
=>
{
if
(
importance
&&
item
.
importance
!==
importance
)
return
false
;
if
(
type
&&
item
.
type
!==
type
)
return
false
;
if
(
title
&&
item
.
title
.
indexOf
(
title
)
<
0
)
return
false
;
return
true
;
});
const
pageList
=
mockList
.
filter
((
item
,
index
)
=>
index
<
limit
*
page
&&
index
>=
limit
*
(
page
-
1
));
return
new
Promise
(
resolve
=>
{
setTimeout
(()
=>
{
resolve
([
200
,
{
total
:
mockList
.
length
,
items
:
pageList
}]);
},
100
);
})
},
getPv
:
()
=>
new
Promise
(
resolve
=>
{
setTimeout
(()
=>
{
resolve
([
200
,
{
pvData
:
[{
key
:
'
PC网站
'
,
pv
:
1024
},
{
key
:
'
mobile网站
'
,
pv
:
1024
},
{
key
:
'
ios
'
,
pv
:
1024
},
{
key
:
'
android
'
,
pv
:
1024
}]
}]);
},
100
);
})
};
src/mock/index.js
浏览文件 @
3e3819ca
...
...
@@ -19,6 +19,7 @@ mock.onGet('/article/list').reply(200, data);
mock
.
onGet
(
'
/article_table/list
'
).
reply
(
article_tableAPI
.
getList
);
mock
.
onGet
(
'
/article_table/pv
'
).
reply
(
article_tableAPI
.
getPv
);
...
...
src/views/example/table.vue
浏览文件 @
3e3819ca
...
...
@@ -4,16 +4,12 @@
<el-input
@
keyup.enter.native=
"handleFilter"
style=
"width: 200px;"
class=
"filter-item"
placeholder=
"标题"
v-model=
"listQuery.title"
>
</el-input>
<el-date-picker
class=
"filter-item"
v-model=
"time"
type=
"daterange"
align=
"left"
placeholder=
"选择日期范围"
:picker-options=
"pickerOptions"
@
input=
"timeFilter"
style=
"width: 210px"
>
</el-date-picker>
<el-select
clearable
style=
"width: 90px"
class=
"filter-item"
v-model=
"listQuery.importance"
placeholder=
"重要性"
>
<el-option
v-for=
"item in importanceOptions"
:key=
"item"
:label=
"item"
:value=
"item"
>
</el-option>
</el-select>
<el-select
clearable
class=
"filter-item"
style=
"width: 130px"
v-model=
"listQuery.
calendar_
type"
placeholder=
"类型"
>
<el-select
clearable
class=
"filter-item"
style=
"width: 130px"
v-model=
"listQuery.type"
placeholder=
"类型"
>
<el-option
v-for=
"item in calendarTypeOptions"
:key=
"item.key"
:label=
"item.display_name+'('+item.key+')'"
:value=
"item.key"
>
</el-option>
</el-select>
...
...
@@ -40,7 +36,7 @@
<
el
-
table
-
column
min
-
width
=
"
300px
"
label
=
"
标题
"
>
<
template
scope
=
"
scope
"
>
<
span
class
=
"
link-type
"
@
click
=
"
handleUpdate(scope.row)
"
>
{{
scope
.
row
.
title
}}
<
/span
>
<
el
-
tag
>
{{
scope
.
row
.
calendar_
type
|
typeFilter
}}
<
/el-tag
>
<
el
-
tag
>
{{
scope
.
row
.
type
|
typeFilter
}}
<
/el-tag
>
<
/template
>
<
/el-table-column
>
...
...
@@ -57,6 +53,12 @@
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
align
=
"
center
"
label
=
"
阅读数
"
width
=
"
95
"
>
<
template
scope
=
"
scope
"
>
<
span
class
=
"
link-type
"
@
click
=
'
handleFetchPv(scope.row.pageviews)
'
>
{{
scope
.
row
.
pageviews
}}
<
/span
>
<
/template
>
<
/el-table-column
>
<
el
-
table
-
column
class
-
name
=
"
status-col
"
label
=
"
状态
"
width
=
"
90
"
>
<
template
scope
=
"
scope
"
>
<
el
-
tag
:
type
=
"
scope.row.status | statusFilter
"
>
{{
scope
.
row
.
status
}}
<
/el-tag
>
...
...
@@ -77,7 +79,7 @@
<
/el-table
>
<
div
v
-
show
=
"
!listLoading
"
class
=
"
pagination-container
"
>
<
el
-
pagination
@
size
-
change
=
"
handleSizeChange
"
@
current
-
change
=
"
handleCurrentChange
"
:
current
-
page
=
"
listQuery.
cursor
"
:
page
-
sizes
=
"
[10,20,30, 50]
"
<
el
-
pagination
@
size
-
change
=
"
handleSizeChange
"
@
current
-
change
=
"
handleCurrentChange
"
:
current
-
page
=
"
listQuery.
page
"
:
page
-
sizes
=
"
[10,20,30, 50]
"
:
page
-
size
=
"
listQuery.limit
"
layout
=
"
total, sizes, prev, pager, next, jumper
"
:
total
=
"
total
"
>
<
/el-pagination
>
<
/div
>
...
...
@@ -85,7 +87,7 @@
<
el
-
dialog
:
title
=
"
textMap[dialogStatus]
"
v
-
model
=
"
dialogFormVisible
"
>
<
el
-
form
class
=
"
small-space
"
:
model
=
"
temp
"
label
-
position
=
"
left
"
label
-
width
=
"
70px
"
style
=
'
width: 400px; margin-left:50px;
'
>
<
el
-
form
-
item
label
=
"
类型
"
>
<
el
-
select
class
=
"
filter-item
"
v
-
model
=
"
temp.
calendar_
type
"
placeholder
=
"
请选择
"
>
<
el
-
select
class
=
"
filter-item
"
v
-
model
=
"
temp.type
"
placeholder
=
"
请选择
"
>
<
el
-
option
v
-
for
=
"
item in calendarTypeOptions
"
:
key
=
"
item.key
"
:
label
=
"
item.display_name
"
:
value
=
"
item.key
"
>
<
/el-option
>
<
/el-select
>
...
...
@@ -122,12 +124,23 @@
<
el
-
button
v
-
else
type
=
"
primary
"
@
click
=
"
update
"
>
确
定
<
/el-button
>
<
/div
>
<
/el-dialog
>
<
el
-
dialog
title
=
"
阅读数统计
"
v
-
model
=
"
dialogPvVisible
"
size
=
"
small
"
>
<
el
-
table
:
data
=
"
pvData
"
border
fit
highlight
-
current
-
row
style
=
"
width: 100%
"
>
<
el
-
table
-
column
prop
=
"
key
"
label
=
"
渠道
"
>
<
/el-table-column
>
<
el
-
table
-
column
prop
=
"
pv
"
label
=
"
pv
"
>
<
/el-table-column
>
<
/el-table
>
<
span
slot
=
"
footer
"
class
=
"
dialog-footer
"
>
<
el
-
button
type
=
"
primary
"
@
click
=
"
dialogPvVisible = false
"
>
确
定
<
/el-button
>
<
/span
>
<
/el-dialog
>
<
/div
>
<
/template
>
<
script
>
import
{
fetchList
}
from
'
api/article_table
'
;
import
{
parseTime
,
objectMerge
,
pickerOptions
}
from
'
utils
'
;
import
{
fetchList
,
fetchPv
}
from
'
api/article_table
'
;
import
{
parseTime
,
objectMerge
}
from
'
utils
'
;
const
calendarTypeOptions
=
[
{
key
:
'
FD
'
,
display_name
:
'
经济数据
'
}
,
...
...
@@ -150,12 +163,11 @@
total
:
null
,
listLoading
:
true
,
listQuery
:
{
cursor
:
1
,
page
:
1
,
limit
:
20
,
start
:
undefined
,
end
:
undefined
,
importance
:
undefined
,
title
:
undefined
title
:
undefined
,
type
:
undefined
}
,
temp
:
{
id
:
undefined
,
...
...
@@ -163,10 +175,9 @@
remark
:
''
,
timestamp
:
0
,
title
:
''
,
calendar_
type
:
''
,
type
:
''
,
status
:
'
published
'
}
,
time
:
''
,
// 时间筛选项
importanceOptions
:
[
1
,
2
,
3
],
calendarTypeOptions
,
statusOptions
:
[
'
published
'
,
'
draft
'
,
'
deleted
'
],
...
...
@@ -176,9 +187,8 @@
update
:
'
编辑
'
,
create
:
'
创建
'
}
,
pickerOptions
:
{
shortcuts
:
pickerOptions
}
dialogPvVisible
:
false
,
pvData
:
[]
}
}
,
created
()
{
...
...
@@ -201,7 +211,6 @@
getList
()
{
this
.
listLoading
=
true
;
fetchList
(
this
.
listQuery
).
then
(
response
=>
{
console
.
log
(
response
)
this
.
list
=
response
.
items
;
this
.
total
=
response
.
total
;
this
.
listLoading
=
false
;
...
...
@@ -215,7 +224,7 @@
this
.
getList
();
}
,
handleCurrentChange
(
val
)
{
this
.
listQuery
.
cursor
=
val
;
this
.
listQuery
.
page
=
val
;
this
.
getList
();
}
,
timeFilter
(
time
)
{
...
...
@@ -291,14 +300,20 @@
timestamp
:
0
,
title
:
''
,
status
:
'
published
'
,
calendar_
type
:
''
type
:
''
}
;
}
,
handleFetchPv
(
pv
)
{
fetchPv
(
pv
).
then
(
response
=>
{
this
.
pvData
=
response
.
pvData
this
.
dialogPvVisible
=
true
}
)
}
,
handleDownload
()
{
require
.
ensure
([],
()
=>
{
const
{
export_json_to_excel
}
=
require
(
'
vendor/Export2Excel
'
);
const
tHeader
=
[
'
时间
'
,
'
地区
'
,
'
类型
'
,
'
标题
'
,
'
重要性
'
];
const
filterVal
=
[
'
timestamp
'
,
'
province
'
,
'
calendar_
type
'
,
'
title
'
,
'
importance
'
];
const
filterVal
=
[
'
timestamp
'
,
'
province
'
,
'
type
'
,
'
title
'
,
'
importance
'
];
const
data
=
this
.
formatJson
(
filterVal
,
this
.
list
);
export_json_to_excel
(
tHeader
,
data
,
'
table数据
'
);
}
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录