Skip to content

Commit 05c0ab1

Browse files
lin-xinlin-xin
committed
'增加表格编辑和删除操作'
1 parent 16e7be1 commit 05c0ab1

File tree

2 files changed

+98
-37
lines changed

2 files changed

+98
-37
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<title>vue-manage-system | 基于Vue 的后台管理系统</title>
66
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
7-
<meta name="keywords" content="vue.js, wms, vue2, 后台模板, 管理系统, element" />
7+
<meta name="keywords" content="vue, vue-manage-system, manage-system, 后台, 管理系统, element" />
88
<meta name="description" content="基于Vue2 + Element UI 的后台管理系统解决方案" />
99
</head>
1010
<body>

‎src/components/page/BaseTable.vue‎

Lines changed: 97 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,45 @@
2626
</el-table-column>
2727
<el-table-column label="操作" width="180">
2828
<template slot-scope="scope">
29-
<el-button size="small"
30-
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
31-
<el-button size="small" type="danger"
32-
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
29+
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
30+
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
3331
</template>
3432
</el-table-column>
3533
</el-table>
3634
<div class="pagination">
37-
<el-pagination
38-
@current-change ="handleCurrentChange"
39-
layout="prev, pager, next"
40-
:total="1000">
35+
<el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">
4136
</el-pagination>
4237
</div>
4338
</div>
39+
40+
<!-- 编辑弹出框 -->
41+
<el-dialog title="编辑" :visible.sync="editVisible" width="30%">
42+
<el-form ref="form" :model="form" label-width="50px">
43+
<el-form-item label="日期">
44+
<el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
45+
</el-form-item>
46+
<el-form-item label="姓名">
47+
<el-input v-model="form.name"></el-input>
48+
</el-form-item>
49+
<el-form-item label="地址">
50+
<el-input v-model="form.address"></el-input>
51+
</el-form-item>
52+
53+
</el-form>
54+
<span slot="footer" class="dialog-footer">
55+
<el-button @click="editVisible = false">取 消</el-button>
56+
<el-button type="primary" @click="saveEdit">确 定</el-button>
57+
</span>
58+
</el-dialog>
59+
60+
<!-- 删除提示框 -->
61+
<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
62+
<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
63+
<span slot="footer" class="dialog-footer">
64+
<el-button @click="delVisible = false">取 消</el-button>
65+
<el-button type="primary" @click="deleteRow">确 定</el-button>
66+
</span>
67+
</el-dialog>
4468
</div>
4569
</template>
4670

@@ -55,27 +79,35 @@
5579
select_cate: '',
5680
select_word: '',
5781
del_list: [],
58-
is_search: false
82+
is_search: false,
83+
editVisible: false,
84+
delVisible: false,
85+
form: {
86+
name: '',
87+
date: '',
88+
address: ''
89+
},
90+
idx: -1
5991
}
6092
},
61-
created(){
93+
created() {
6294
this.getData();
6395
},
6496
computed: {
65-
data(){
97+
data() {
6698
return this.tableData.filter((d) => {
6799
let is_del = false;
68100
for (let i = 0; i < this.del_list.length; i++) {
69-
if(d.name === this.del_list[i].name){
101+
if (d.name === this.del_list[i].name) {
70102
is_del = true;
71103
break;
72104
}
73105
}
74-
if(!is_del){
75-
if(d.address.indexOf(this.select_cate) > -1 &&
106+
if (!is_del) {
107+
if (d.address.indexOf(this.select_cate) > -1 &&
76108
(d.name.indexOf(this.select_word) > -1 ||
77-
d.address.indexOf(this.select_word) > -1)
78-
){
109+
d.address.indexOf(this.select_word) > -1)
110+
) {
79111
return d;
80112
}
81113
}
@@ -84,21 +116,23 @@
84116
},
85117
methods: {
86118
// 分页导航
87-
handleCurrentChange(val){
119+
handleCurrentChange(val) {
88120
this.cur_page = val;
89121
this.getData();
90122
},
91123
// 获取 easy-mock 的模拟数据
92-
getData(){
124+
getData() {
93125
// 开发环境使用 easy-mock 数据，正式环境使用 json 文件
94-
if(process.env.NODE_ENV === 'development'){
126+
if (process.env.NODE_ENV === 'development') {
95127
this.url = '/ms/table/list';
96128
};
97-
this.$axios.post(this.url, {page:this.cur_page}).then((res) => {
129+
this.$axios.post(this.url, {
130+
page: this.cur_page
131+
}).then((res) => {
98132
this.tableData = res.data.list;
99133
})
100134
},
101-
search(){
135+
search() {
102136
this.is_search = true;
103137
},
104138
formatter(row, column) {
@@ -108,37 +142,64 @@
108142
return row.tag === value;
109143
},
110144
handleEdit(index, row) {
111-
this.$message('编辑第'+(index+1)+'行');
145+
this.idx = index;
146+
const item = this.tableData[index];
147+
this.form = {
148+
name: item.name,
149+
date: item.date,
150+
address: item.address
151+
}
152+
this.editVisible = true;
112153
},
113154
handleDelete(index, row) {
114-
this.$message.error('删除第'+(index+1)+'行');
155+
this.idx = index;
156+
this.delVisible = true;
115157
},
116-
delAll(){
158+
delAll() {
117159
const length = this.multipleSelection.length;
118160
let str = '';
119161
this.del_list = this.del_list.concat(this.multipleSelection);
120162
for (let i = 0; i < length; i++) {
121163
str += this.multipleSelection[i].name + ' ';
122164
}
123-
this.$message.error('删除了'+str);
165+
this.$message.error('删除了' + str);
124166
this.multipleSelection = [];
125167
},
126168
handleSelectionChange(val) {
127169
this.multipleSelection = val;
170+
},
171+
// 保存编辑
172+
saveEdit() {
173+
this.$set(this.tableData, this.idx, this.form);
174+
this.editVisible = false;
175+
this.$message.success(`修改第 ${this.idx+1} 行成功`);
176+
},
177+
// 确定删除
178+
deleteRow(){
179+
this.tableData.splice(this.idx, 1);
180+
this.$message.success('删除成功');
181+
this.delVisible = false;
128182
}
129183
}
130184
}
185+
131186
</script>
132187

133188
<style scoped>
134-
.handle-box{
135-
margin-bottom: 20px;
136-
}
137-
.handle-select{
138-
width: 120px;
139-
}
140-
.handle-input{
141-
width: 300px;
142-
display: inline-block;
143-
}
144-
</style>
189+
.handle-box {
190+
margin-bottom: 20px;
191+
}
192+
193+
.handle-select {
194+
width: 120px;
195+
}
196+
197+
.handle-input {
198+
width: 300px;
199+
display: inline-block;
200+
}
201+
.del-dialog-cnt{
202+
font-size: 16px;
203+
text-align: center
204+
}
205+
</style>

0 commit comments

Comments
 (0)