Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
绝世唐门三哥
Vue Manage System
提交
05c0ab1d
Vue Manage System
项目概览
绝世唐门三哥
/
Vue Manage System
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Vue Manage System
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
05c0ab1d
编写于
4月 18, 2018
作者:
L
lin-xin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
'增加表格编辑和删除操作'
上级
16e7be12
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
98 addition
and
37 deletion
+98
-37
index.html
index.html
+1
-1
src/components/page/BaseTable.vue
src/components/page/BaseTable.vue
+97
-36
未找到文件。
index.html
浏览文件 @
05c0ab1d
...
...
@@ -4,7 +4,7 @@
<meta
charset=
"utf-8"
>
<title>
vue-manage-system | 基于Vue 的后台管理系统
</title>
<meta
name=
"viewport"
content=
"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
>
<meta
name=
"keywords"
content=
"vue
.js, wms, vue2, 后台模板
, 管理系统, element"
/>
<meta
name=
"keywords"
content=
"vue
, vue-manage-system, manage-system, 后台
, 管理系统, element"
/>
<meta
name=
"description"
content=
"基于Vue2 + Element UI 的后台管理系统解决方案"
/>
</head>
<body>
...
...
src/components/page/BaseTable.vue
浏览文件 @
05c0ab1d
...
...
@@ -26,21 +26,45 @@
</el-table-column>
<el-table-column
label=
"操作"
width=
"180"
>
<template
slot-scope=
"scope"
>
<el-button
size=
"small"
@
click=
"handleEdit(scope.$index, scope.row)"
>
编辑
</el-button>
<el-button
size=
"small"
type=
"danger"
@
click=
"handleDelete(scope.$index, scope.row)"
>
删除
</el-button>
<el-button
size=
"small"
@
click=
"handleEdit(scope.$index, scope.row)"
>
编辑
</el-button>
<el-button
size=
"small"
type=
"danger"
@
click=
"handleDelete(scope.$index, scope.row)"
>
删除
</el-button>
</
template
>
</el-table-column>
</el-table>
<div
class=
"pagination"
>
<el-pagination
@
current-change =
"handleCurrentChange"
layout=
"prev, pager, next"
:total=
"1000"
>
<el-pagination
@
current-change=
"handleCurrentChange"
layout=
"prev, pager, next"
:total=
"1000"
>
</el-pagination>
</div>
</div>
<!-- 编辑弹出框 -->
<el-dialog
title=
"编辑"
:visible.sync=
"editVisible"
width=
"30%"
>
<el-form
ref=
"form"
:model=
"form"
label-width=
"50px"
>
<el-form-item
label=
"日期"
>
<el-date-picker
type=
"date"
placeholder=
"选择日期"
v-model=
"form.date"
value-format=
"yyyy-MM-dd"
style=
"width: 100%;"
></el-date-picker>
</el-form-item>
<el-form-item
label=
"姓名"
>
<el-input
v-model=
"form.name"
></el-input>
</el-form-item>
<el-form-item
label=
"地址"
>
<el-input
v-model=
"form.address"
></el-input>
</el-form-item>
</el-form>
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"editVisible = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"saveEdit"
>
确 定
</el-button>
</span>
</el-dialog>
<!-- 删除提示框 -->
<el-dialog
title=
"提示"
:visible.sync=
"delVisible"
width=
"300px"
center
>
<div
class=
"del-dialog-cnt"
>
删除不可恢复,是否确定删除?
</div>
<span
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"delVisible = false"
>
取 消
</el-button>
<el-button
type=
"primary"
@
click=
"deleteRow"
>
确 定
</el-button>
</span>
</el-dialog>
</div>
</template>
...
...
@@ -55,27 +79,35 @@
select_cate
:
''
,
select_word
:
''
,
del_list
:
[],
is_search
:
false
is_search
:
false
,
editVisible
:
false
,
delVisible
:
false
,
form
:
{
name
:
''
,
date
:
''
,
address
:
''
},
idx
:
-
1
}
},
created
(){
created
()
{
this
.
getData
();
},
computed
:
{
data
(){
data
()
{
return
this
.
tableData
.
filter
((
d
)
=>
{
let
is_del
=
false
;
for
(
let
i
=
0
;
i
<
this
.
del_list
.
length
;
i
++
)
{
if
(
d
.
name
===
this
.
del_list
[
i
].
name
)
{
if
(
d
.
name
===
this
.
del_list
[
i
].
name
)
{
is_del
=
true
;
break
;
}
}
if
(
!
is_del
)
{
if
(
d
.
address
.
indexOf
(
this
.
select_cate
)
>
-
1
&&
if
(
!
is_del
)
{
if
(
d
.
address
.
indexOf
(
this
.
select_cate
)
>
-
1
&&
(
d
.
name
.
indexOf
(
this
.
select_word
)
>
-
1
||
d
.
address
.
indexOf
(
this
.
select_word
)
>
-
1
)
){
d
.
address
.
indexOf
(
this
.
select_word
)
>
-
1
)
)
{
return
d
;
}
}
...
...
@@ -84,21 +116,23 @@
},
methods
:
{
// 分页导航
handleCurrentChange
(
val
){
handleCurrentChange
(
val
)
{
this
.
cur_page
=
val
;
this
.
getData
();
},
// 获取 easy-mock 的模拟数据
getData
(){
getData
()
{
// 开发环境使用 easy-mock 数据,正式环境使用 json 文件
if
(
process
.
env
.
NODE_ENV
===
'
development
'
)
{
if
(
process
.
env
.
NODE_ENV
===
'
development
'
)
{
this
.
url
=
'
/ms/table/list
'
;
};
this
.
$axios
.
post
(
this
.
url
,
{
page
:
this
.
cur_page
}).
then
((
res
)
=>
{
this
.
$axios
.
post
(
this
.
url
,
{
page
:
this
.
cur_page
}).
then
((
res
)
=>
{
this
.
tableData
=
res
.
data
.
list
;
})
},
search
(){
search
()
{
this
.
is_search
=
true
;
},
formatter
(
row
,
column
)
{
...
...
@@ -108,37 +142,64 @@
return
row
.
tag
===
value
;
},
handleEdit
(
index
,
row
)
{
this
.
$message
(
'
编辑第
'
+
(
index
+
1
)
+
'
行
'
);
this
.
idx
=
index
;
const
item
=
this
.
tableData
[
index
];
this
.
form
=
{
name
:
item
.
name
,
date
:
item
.
date
,
address
:
item
.
address
}
this
.
editVisible
=
true
;
},
handleDelete
(
index
,
row
)
{
this
.
$message
.
error
(
'
删除第
'
+
(
index
+
1
)
+
'
行
'
);
this
.
idx
=
index
;
this
.
delVisible
=
true
;
},
delAll
(){
delAll
()
{
const
length
=
this
.
multipleSelection
.
length
;
let
str
=
''
;
this
.
del_list
=
this
.
del_list
.
concat
(
this
.
multipleSelection
);
for
(
let
i
=
0
;
i
<
length
;
i
++
)
{
str
+=
this
.
multipleSelection
[
i
].
name
+
'
'
;
}
this
.
$message
.
error
(
'
删除了
'
+
str
);
this
.
$message
.
error
(
'
删除了
'
+
str
);
this
.
multipleSelection
=
[];
},
handleSelectionChange
(
val
)
{
this
.
multipleSelection
=
val
;
},
// 保存编辑
saveEdit
()
{
this
.
$set
(
this
.
tableData
,
this
.
idx
,
this
.
form
);
this
.
editVisible
=
false
;
this
.
$message
.
success
(
`修改第
${
this
.
idx
+
1
}
行成功`
);
},
// 确定删除
deleteRow
(){
this
.
tableData
.
splice
(
this
.
idx
,
1
);
this
.
$message
.
success
(
'
删除成功
'
);
this
.
delVisible
=
false
;
}
}
}
</
script
>
<
style
scoped
>
.handle-box
{
margin-bottom
:
20px
;
}
.handle-select
{
width
:
120px
;
}
.handle-input
{
width
:
300px
;
display
:
inline-block
;
}
</
style
>
\ No newline at end of file
.handle-box
{
margin-bottom
:
20px
;
}
.handle-select
{
width
:
120px
;
}
.handle-input
{
width
:
300px
;
display
:
inline-block
;
}
.del-dialog-cnt
{
font-size
:
16px
;
text-align
:
center
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录