From 9f3f6ff0e59e405c13fbe13397f761f5f40dfb42 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Fri, 16 Jul 2021 12:50:00 +0800
Subject: [PATCH] =?UTF-8?q?scTable=20=E5=A2=9E=E5=8A=A0remoteFilter=20?=
 =?UTF-8?q?=E8=BF=9C=E7=A8=8B=E8=BF=87=E6=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scTable/index.vue | 17 ++++++++++++++---
 src/views/setting/user/index.vue |  6 +++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index 9f681c99..7d9b58e8 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="scTable" ref="scTableMain" v-loading="loading">
 		<div class="scTable-table">
-			<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow"  @selection-change="selectionChange" @current-change="currentChange" @sort-change="sortChange">
+			<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow"  @selection-change="selectionChange" @current-change="currentChange" @sort-change="sortChange" @filter-change="filterChange">
 				<slot></slot>
 				<el-table-column v-for="(item, index) in userColumn" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
 					<template #default="scope">
@@ -46,11 +46,12 @@
 		},
 		props: {
 			apiObj: { type: Object, default: () => {} },
-			params: { type: Object, default: () => {} },
+			params: { type: Object, default: () => ({}) },
 			data: { type: Object, default: () => {} },
 			rowKey: { type: String, default: "" },
 			column: { type: Object, default: () => {} },
 			remoteSort: { type: Boolean, default: false },
+			remoteFilter: { type: Boolean, default: false },
 			hidePagination: { type: Boolean, default: false },
 			hideDo: { type: Boolean, default: false },
 			stripe: { type: Boolean, default: false },
@@ -152,7 +153,7 @@
 			//更新数据
 			upData(params){
 				this.currentPage = 1;
-				this.tableParams = params;
+				Object.assign(this.tableParams, params || {})
 				this.getData()
 			},
 			//自定义变化事件
@@ -178,6 +179,16 @@
 				}
 				this.getData()
 			},
+			//过滤事件
+			filterChange(filters){
+				if(!this.remoteFilter){
+					return false
+				}
+				Object.keys(filters).forEach(key => {
+					filters[key] = filters[key].join(',')
+				})
+				this.upData(filters)
+			},
 			//转发原装方法&事件
 			selectionChange(selection){
 				this.$emit('selection-change', selection)
diff --git a/src/views/setting/user/index.vue b/src/views/setting/user/index.vue
index 6261725e..4967f211 100644
--- a/src/views/setting/user/index.vue
+++ b/src/views/setting/user/index.vue
@@ -26,15 +26,15 @@
 					</div>
 				</el-header>
 				<el-main class="nopadding">
-					<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort>
+					<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter>
 						<el-table-column type="selection" width="50"></el-table-column>
 						<el-table-column label="ID" prop="id" width="80" sortable='custom'></el-table-column>
-						<el-table-column label="头像" width="80">
+						<el-table-column label="头像" width="80" column-key="filterAvatar" :filters="[{text: '已上传', value: '1'}, {text: '未上传', value: '0'}]">
 							<template #default="scope">
 								<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
 							</template>
 						</el-table-column>
-						<el-table-column label="登录账号" prop="userName" width="150" sortable='custom'></el-table-column>
+						<el-table-column label="登录账号" prop="userName" width="150" sortable='custom' column-key="filterUserName" :filters="[{text: '系统账号', value: '1'}, {text: '普通账号', value: '0'}]"></el-table-column>
 						<el-table-column label="姓名" prop="name" width="150" sortable='custom'></el-table-column>
 						<el-table-column label="所属角色" prop="groupName" width="200" sortable='custom'></el-table-column>
 						<el-table-column label="加入时间" prop="date" width="150" sortable='custom'></el-table-column>