batch remove

src/App.vue

@@ -44,7 +44,7 @@
 	
 	.toolbar {
 		background: #fff;
-		padding: 10px 10px 0px 10px;
+		padding: 10px;
 		.el-form-item {
 			margin-bottom: 10px;
 		}

src/api/api.js

@@ -10,6 +10,8 @@ export const getUserListPage = params => { return axios.get(`${base}/user/listpa
 
 export const removeUser = params => { return axios.get(`${base}/user/remove`, { params: params }); };
 
+export const batchRemoveUser = params => { return axios.get(`${base}/user/batchremove`, { params: params }); };
+
 export const editUser = params => { return axios.get(`${base}/user/edit`, { params: params }); };
 
 export const addUser = params => { return axios.get(`${base}/user/add`, { params: params }); };

src/mock/mock.js

@@ -92,6 +92,21 @@ export default {
       });
     });
 
+    //批量删除用户
+    mock.onGet('/user/batchremove').reply(config => {
+      let { ids } = config.params;
+      ids = ids.split(',');
+      _Users = _Users.filter(u => !ids.includes(u.id));
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve([200, {
+            code: 200,
+            msg: '删除成功'
+          }]);
+        }, 500);
+      });
+    });
+
     //编辑用户
     mock.onGet('/user/edit').reply(config => {
       let { id, name, addr, age, birth, sex } = config.params;

src/pages/nav1/Table.vue

@@ -1,7 +1,7 @@
 <template>
 	<section>
 		<!--工具条-->
-		<el-col :span="24" class="toolbar">
+		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
 			<el-form :inline="true" :model="filters">
 				<el-form-item>
 					<el-input v-model="filters.name" placeholder="姓名"></el-input>
@@ -16,8 +16,9 @@
 		</el-col>
 
 		<!--列表-->
-		<template>
-			<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
+		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
+			<el-table-column type="selection" width="55">
+			</el-table-column>
 			<el-table-column type="index" width="60">
 			</el-table-column>
 			<el-table-column prop="name" label="姓名" width="120" sortable>
@@ -37,10 +38,10 @@
 				</span>
 			</el-table-column>
 		</el-table>
-		</template>
 
-		<!--分页-->
-		<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
+		<!--工具条-->
+		<el-col :span="24" class="toolbar">
+			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
 			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
 			</el-pagination>
 		</el-col>
@@ -82,7 +83,7 @@
 <script>
 	import util from '../../common/js/util'
 	import NProgress from 'nprogress'
-	import { getUserListPage, removeUser, editUser, addUser } from '../../api/api';
+	import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';
 
 	export default {
 		data() {
@@ -94,6 +95,7 @@
 				total: 0,
 				page: 1,
 				listLoading: false,
+				sels: [],//列表选中列
 				editFormVisible: false,//编辑界面显是否显示
 				editFormTtile: '编辑',//编辑界面标题
 				//编辑界面数据
@@ -248,6 +250,30 @@
 				this.editForm.age = 0;
 				this.editForm.birth = '';
 				this.editForm.addr = '';
+			},
+			selsChange: function (sels) {
+				this.sels = sels;
+			},
+			//批量删除
+			batchRemove: function () {
+				var ids = this.sels.map(item => item.id).toString();
+				this.$confirm('确认删除选中记录吗？', '提示').then(() => {
+					this.listLoading = true;
+					NProgress.start();
+					let para = { ids: ids };
+					batchRemoveUser(para).then((res) => {
+						this.listLoading = false;
+						NProgress.done();
+						this.$notify({
+							title: '成功',
+							message: '删除成功',
+							type: 'success'
+						});
+						this.getUsers();
+					});
+				}).catch(() => {
+
+				});
 			}
 		},
 		mounted() {

src/pages/nav1/user.vue

@@ -1,7 +1,7 @@
 <template>
 	<section>
 		<!--工具条-->
-		<el-col :span="24" class="toolbar">
+		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
 			<el-form :inline="true" :model="filters">
 				<el-form-item>
 					<el-input v-model="filters.name" placeholder="姓名"></el-input>